router.afterEach 与 router.beforeEach

vue 中 router.afterEach用法,和router.beforeEach用法

1. router.afterEach是vue全局的导航钩子函数，我个人的理解是，进入某个路由之后触发的钩子函数，我用的比较多的有两种用法

   1. 修改，每个页面的title

      1. 首先在路由元中meta添加一个title属性，然后 用 document.title = to.meta.title修改当前页面的title。

         router.afterEach((to, from, next)=> {
           document.title = to.meta.title;
           to.meta && (document.title = to.meta.title) // 推荐写法
         })
         

   2. 每次切换页面的时候，让页面滚动到最顶部

      router.afterEach((to, from, next)=> {
        window.scrollTo(0, 0)
      })
      

2. router.beforeEach是路由的全局导航守卫，在即将进入路由回调会被触发，一般用来做一些进入页面的限制。 比如没有登录,就不能进入某些页面,只有登录了之后才有权限查看某些页面。说白了就是路由跳转前根据业务逻辑判断是否拦截。

   1. 获取token
   2. 判断token否存在以及要进入的页面
      1. 如果token存在或者要进入的页面是登陆页，放行
      2. 如果没有token并且进入的页面不是登陆页，那么提示用户登陆失效

   router.beforeEach((to, from, next)=> {
     let token = localstorage.getItem('token');
     if(to.path == "/login" || token) {
       next();
     }else {
       alert("登录失效，请重新登录");
       setTimeout(()=> {
         next({
           path: "/login"
         })
       }, 500)
     }
   })