vue路由导航守卫

vue的路由守卫分为三种：全局路由守卫、组件内路由守卫和路由独享守卫。

一、全局路由守卫

全局路由守卫分为两种：全局前置守卫和全局后置钩子

一.全局前置守卫

 //语法：
    router.beforeEach((to, from, next) => {
        //...
    	next()
    })
    //使用：
       router.beforeEach((to, from, next) => {
                 //我在这里模仿了一个获取用户信息的方法
       let isLogin = window.sessionStorage.getItem('userInfo');
         if (isLogin) {
          //如果用户信息存在则往下执行。
           next()
       } else {
         //如果用户token不存在则跳转到login页面
         if (to.path === '/login') {
            next()
          } else {
           next('/login')
        }
    } 
    	next()
    })

可以利用beforeEach来完成标题的修改.

二.全局后置钩子

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身

      router.afterEach( (to,from )=> {
       console.log(to);
       console.log(from);
      //...
     }) 

二、路由独享守卫

在router文件夹里的index.js里相对应的路由中写入

  beforeEnter: (to, from, next) => {
        // ...
        next()
      }

三、组件内路由守卫

顾名思义，在你要设置的组件内部使用，和data同级

1.beforeRouteEnter
2.beforeRouteUpdate
3.beforeRouteLeave

  beforeRouteEnter ((to, from, next)=> {
    // ...
    next()
  })