高级路由特性

• 1、具有参数的动态路由
• 2、vue守卫-路由钩子
• 全局钩子
• 某个路由独享钩子
• 组件路由

1、具有参数的动态路由

假如id prop是我们将从服务器获取工单详情的工单ID。服务器以/ticket/的形式提供动态路由，其中就是工单的ID。
路由的路径是/ticket/。以下是带参数的路由示例；

例如：

const routes = [
{path: '/trickets',component:TicketsLayout,
meta:{private:true},children:[
{path: ':id',name:'trickets',component:Ticket}
]}
]

//将标题元素的链接指向新的路由

<router-link :to="{name:'tricket',params:{id:tricket_id}}">{{tricket.title}}</router-link>

官方路由文档

2、vue守卫-路由钩子

我们在开发中，经常会遇到，进入登录页面与主页面的判断，通常后台会传回一个session来判断，现在就考虑下有多少中方法来实现这种效果；
用动态路由，判断用户是否登录跳转登录页面还是主页面，判断管理员权限，判断页面是否存在，不存在跳转404页面，

router.beforeEach((to, from, next) => {
　　console.log(store.state.token)
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
　　const route = ['index', 'list'];
　　let isLogin = store.state.token; // 是否登录
// 未登录状态；当路由到route指定页时，跳转至login
　　if (route.indexOf(to.name) >= 0) {
　　　　if (isLogin == null) {
　　　　　　router.push({ path: '/login', });
　　　　}
　　}
// 已登录状态；当路由到login时，跳转至home
　　console.log(to.name)
　　localStorage.setItem('routerName', to.name)
　　if (to.name === 'login') {
　　　　if (isLogin != null) {
　　　　　　router.push({ path: '/HomeMain', });;
　　　　}
　　}
　　next();
});

全局钩子

主要包括beforeEach和aftrEach,
beforeEach函数有三个参数：
to:router即将进入的路由对象
from:当前导航即将离开的路由
next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
afterEach函数不用传next()函数

router.beforeEach((to, from, next) => {
console.log(store.state.token)
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
const route = ['index', 'list'];
let isLogin = store.state.token; // 是否登录
// 未登录状态；当路由到route指定页时，跳转至login
if (route.indexOf(to.name) >= 0) {
if (isLogin == null) {
router.push({ path: '/login', });
}
}
// 已登录状态；当路由到login时，跳转至home
console.log(to.name)
localStorage.setItem('routerName', to.name)
if (to.name === 'login') {
if (isLogin != null) {
router.push({ path: '/HomeMain', });;
}
}
next();
});

某个路由独享钩子

像说的一样，给某个路由单独使用的，本质上和后面的组件内钩子是一样的。都是特指的某个路由。不同的是，这里的一般定义在router当中，而不是在组件内。

{
path: '/dashboard',
component: resolve => require(['../components/page/Dashboard.vue'], resolve),
meta: { title: '系统首页' },
beforeEnter: (to, from, next) => {

},
beforeLeave: (to, from, next) => {
}
},

组件路由

主要包括 beforeRouteEnter和beforeRouteUpdate ,beforeRouteLeave,这几个钩子都是写在组件里面也可以传三个参数(to,from,next),作用与前面类似.

beforeRouteLeave(to, from, next) {
// ....
next()
},
beforeRouteEnter(to, from, next) {
// ....
next()
},
beforeRouteUpdate(to, from, next) {
// ....
next()
},
computed: {},
method: {}