VUE+ElementUI

1、什么是ElementUI？

ElementUI 是一个基于 Vue 2.0 的桌面端组件库。它提供了一系列丰富的组件和功能，如布局、表单、导航、数据展示等，帮助开发者快速构建 Vue.js 应用。ElementUI 的设计和实现遵循了清晰和直观的 API 设计原则，使得开发者能够快速上手并使用。同时，ElementUI 也提供了全面的主题定制能力，可以满足各种定制化需求。

官网链接ElementUI

4、参数传递与重定向

前面做的个人信息部分应该是不同的人有专属的个人信息页，那么在请求到main首页时就应该携带参数使之跳转到指定的页面。

<router-link to="/user/profile">个人信息</router-link>
改为：
 <router-link to="{name: '/user/profile',params: {id: 1}}">个人信息</router-link>

这里name代表组件名，params代表要携带的参数。

然后到路由配置中修改，加上参数id

children:[
        {path: '/user/profile:id',name:UserProfile,component: UserProfile},
        {path: '/user/list',component: UserList}
      ]

在Profile.vue中接收参数{{$route.params.id}}，注意：所有的元素必须在根节点下，只能有一个div标签将其他元素包起来

<template>
  <div>
    <h1>个人信息</h1>
    {{$route.params.id}}
  </div>

</template>

使用props 减少耦合

修改路由配置 , 主要在router下的index.js中的路由属性中增加了 props: true 属性

在Profile.vue接收参数为目标组件增加 props 属性

<template>
  <div>
    <h1>个人信息</h1>
    {{id}}
  </div>

</template>

<script>
export default {
  props: ['id'],
  name: 'UserProfile'
}
</script>
<style scoped>
</style>

重定向

Vue 中的重定向是作用在路径不同但组件相同的情况

在index.js中配置重定向的路径，关键词：redirect

{
      path: '/main',
      name: 'main',
      component: Main
    },
    {
      path: '/goHome',
      redirect: '/main'
    }

在Main.vue的侧边栏中加入重定向

<el-menu-item index="1-3">
    <router-link to="/goHome">返回首页</router-link>
</el-menu-item>

5、404和路由钩子

两种路由模式

hash: 路径带 # 号，如： http://localhost/#/login
history：路径不带 # 符号，如 http://localhost/login

改成history模式的

export default new Router({
  mode: 'history',
  routes: []
  });

404页面

在view/下创建NotFound.vue

<template>
<div>
  <h1>404你的页面走丢了</h1>
</div>
</template>

<script>
export default {
  name: 'NotFound'
}
</script>

<style scoped>

</style>

配到路由里面index.js

  {
      path: '*',
      component: NotFound
    }

随便请求一个路径

路由钩子与异步请求

beforeRouteEnter：在进入路由前执行
beforeRouteLeave：在离开路由前执行

进入个人信息页面之前和离开个人信息页面，Profile.vue

Profile.vue

<script>
    export default {
        name: "UserProfile",
        beforeRouteEnter: (to, from, next) => {
            console.log("进入路由之前");
            next();
        },
        beforeRouteLeave: (to, from, next) => {
            console.log("进入路由之后");
            next();
        }
    }
</script>

参数说明：

to：路由将要跳转的路径信息
from：路径跳转前的路径信息
next：路由的控制参数
next() 跳入下一个页面
next(’/path’) 改变路由的跳转方向，使其跳到另一个路由
next(false) 返回原来的页面
next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例

在钩子函数中进行异步请求

安装Axios

cnpm install --save vue-axios
Main.js中引用Axios

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

在进入路由之前进行处理异步请求

<script>
    export default {
        name: "UserProfile",
        beforeRouteEnter: (to, from, next) => {
            console.log("准备进入个人信息页");
            next(vm => {
                //进入路由之前执行getData方法
                vm.getData()
            });
        },
        beforeRouteLeave: (to, from, next) => {
            console.log("准备离开个人信息页");
            next();
        },
        //axios
        methods: {
            getData: function () {
                this.axios({
                    method: 'get',
                    url: 'http://localhost:8080/static/mock/data.json'
                }).then(function (response) {
                    console.log(response)
                })
            }
        }
    }
</script>

og(“准备进入个人信息页”);
next(vm => {
//进入路由之前执行getData方法
vm.getData()
});
},
beforeRouteLeave: (to, from, next) => {
console.log(“准备离开个人信息页”);
next();
},
//axios
methods: {
getData: function () {
this.axios({
method: ‘get’,
url: ‘http://localhost:8080/static/mock/data.json’
}).then(function (response) {
console.log(response)
})
}
}
}

淘先锋技术网

VUE+ElementUI

VUE+ElementUI

1、什么是ElementUI？

2、演示

3、路由嵌套

4、参数传递与重定向

重定向

5、404和路由钩子