路由导航守卫

全局守卫（全局前置守卫，全局解析守卫，全局后置守卫）  路由独享守卫  组件内守卫

导航守卫接收三个参数 ：

        to:路由要去的地方

        from：路由离开的位置

        next：执行下一步操作

next：

        next（false）终端当前导航

        next('/') 或者next（{path:'/'}）跳转到不同的路径

确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错

全局守卫

     

//路由导航守卫
router.beforeEach((to, from, next) => {
    //判断是否是登录页，如果是接着下一步
    if (to.path === '/login') return next()
    //    获取token
    const tokenStr = window.sessionStorage.getItem('token')
    //判断token是否存在，
    if (!tokenStr) {
        return next('/login')

    }
    next()
})

   

独享守卫

在单个组件中使用

     

const routes = [

    {
        path: '/list',
        name: 'List',
        component: () => import('../views/List.vue'),
        // 局部导航守卫
        beforeEnter: (to, from, next) => {
            const logins = localStorage.getItem('user')
            if (!logins) {
                return next('/login')
            } else {
                return next()
            }
            next()
        }
    },

]

组件内守卫

beforeRouteEnter(to, from, next) {
  const logins = localStorage.getItem('user')
  if (!logins) {
    return next('/login')
  } else {
    return next()
  }
  next()
}

//beforeRouteEnter不能访问this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。

beforeRouteEnter

beforeRouteUpdate 可以访问this，在当前路由改变，但是该组件被复用时调用

beforeRouteLeave  可以访问this，导航离开该组件的对应路由时调用