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页面是否需要被缓存。

Logo

前往低代码交流专区

更多推荐