vue-router路由导航守卫

共有这几种：

路由守卫（导航守卫）：

router.beforeEach：全局前置守卫。
router.beforeResolve：全局解析守卫。
router.afterEach：全局后置钩子。

组件内守卫：

beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

路由独享守卫：

beforeEnter

总结：

导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

1、全局守卫

router.beforeEach((to,from,next)=>{})

router.beforeEach((to,from,next)=>{
  if(to.path == '/login' || to.path == '/register'){
    next();
  }else{
    alert('您还没有登录，请先登录');
    next('/login');
  }
})

2、全局后置钩子

router.afterEach((to,from)=>{})

• 只有两个参数，to：进入到哪个路由去，from：从哪个路由离。
• 每次切换路由时，都会弹出alert，点击确定后，展示当前页面。

router.afterEach((to,from)=>{
  alert("after each");
})

组件内守卫

1、到达组件时

beforeRouteEnter:(to,from,next)=>{}

<script>
export default {
    data(){
        return{
            name:"Arya"
        }
    },
    beforeRouteEnter:(to,from,next)=>{
        next(vm=>{
            alert("hello" + vm.name);
        })
    }
}
</script>

2、离开组件时

beforeRouteLeave:(to,from,next)=>{}

• 点击其他组件时，判断是否确认离开。确认执行next()；取消执行next(false)，留在当前页面。

beforeRouteLeave:(to,from,next)=>{
        if(confirm("确定离开此页面吗？") == true){
            next();
        }else{
            next(false);
        }
    }

3、组件更新时

beforeRouteUpdate:(to,from,next)=>{}

• 当组件内子路由发生变化时，会出发该导航守卫。

• 当使用 beforeRouteUpdate 导航守卫时，应该等 next() 函数执行后，再获取 params 或 query 中的参数。

  beforeRouteUpdate (to, from, next) {
    console.log('路由更新之前：从to获取参数', to.params, '从this.$route获取参数', this.$route.params)
    next()
    console.log('路由更新之后：从to获取参数', to.params, '从this.$route获取参数', this.$route.params)
  },

路由独享守卫

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

写进其中一个路由对象中，只在这个路由下起作用。

{
    path:"/login",
    name:"login",
    component:"/login",beforeEnter:(to,from,next)=>{
        next('/login')
    }
}