Vue-router中的导航钩子

vue-router中的导航钩子

vue-router中的钩子有三种

1. 全局导航钩子
2. 路由中配置的单个导航钩子
3. 组件内部的导航钩子

这三种钩子函数的参数用法一样

参数介绍

• to:router即将进入的路由对象
• from:当前导航即将离开的路由
• next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航

一，全局的导航钩子

   全局的导航钩子有两种

// 点击导航前调用
router.beforeEach((to, from, next) => {
  // ...
})
// 点击导航后调用
router.afterEach(route => {
  // ...
})

  router.beforeEach用在项目中（实例一）

 1,用beforeEach为了实现在每个页面中获取路由中的meta.title 的值，显示在页面中（router/index.js文件）

        {
            path: '/element/business',// 商业中心帮助页面
            name: 'business',
            component: business,
            meta: { title: '商业帮助中心' }
        }

2，动态改变每个页面title 属性

/**
 * 导航全局前置守卫
 * 用于检测router变化时改变页面title
 */
router.beforeEach((to, from, next) => {
    // 动态改变页面title属性
    document.title = to.meta.title ? to.meta.title : '元件设置';
    next();
})

  router.beforeEach作为拦截器用在项目中（实例二）

beforeEach有拦截器的功能 ，可以做全局校验如果有权限问题可以跳到指定的页面

//使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {
const role = localStorage.getItem('ms_username');
if(!role && to.path !== '/login'){
next('/login');
}else if(to.meta.permission){
// 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
role === 'admin' ? next() : next('/403');
}else{
next();
}
}
})

  router.afterEach这个全局钩子函数，暂时没有用到，在项目中用到时会进行补充

二，路由中配置的单个导航钩子

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      },
      beforeEnter: (route) => {
        // ...
      }
    }
  ]
});

单个导航钩子暂时没有用到，在项目中用到时会进行补充

三，组件内部的导航钩子

组件内部的导航钩子有三种

beforeRouteEnter 
beforeRouteUpdate (2.2 新增) 
beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当钩子执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

 

router.beforeRouteLeave用在项目中（实例一）

要求：

a,b,c 三个页面

b页面调到a页面，需要a页面进行缓存，

c页面调到a页面，a页面不需要缓存

思路：通过beforeRouterLeave这个钩子来对路由里面的keepAlive进行赋值。从而动态的确定A页面是否需要被缓存。