vue-router路由导航守卫

Posted 2022-12-15 理小理...

共有这几种：

路由守卫（导航守卫）：

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')