导航守卫又称为路由守卫

最新推荐文章于 2025-05-21 14:00:30 发布

原创最新推荐文章于 2025-05-21 14:00:30 发布 · 540 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #导航守卫 #路由守卫

本文深入讲解了Vue中路由守卫的使用，包括全局前置守卫、解析守卫、后置守卫，以及路由独享守卫和组件内守卫。通过实例展示了如何利用这些守卫进行用户权限管理和数据预加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路由进阶部分 – 导航守卫（路由守卫）

作用： — 类似【保安】
- 守卫路由
  - 进
    - 举例：携带数据进
  - 出
    - 举例：事情完成才能出

导航守卫一共有三种形式

全局导航守卫用的时候写在主文件中(main.js),全局的

全局前置守卫 router.beforeEach(fn)
- fn中有三个参数

//to:去往的目标点
//from:当前的木标点
//next：流程    当参数为false时 不可以进行跳转，为空或者true时才可以
router.beforeEach(( to , from , next )=>{
    const name = localStorage.getItem('name')
    if( name || to.path === '/my'){
        next()
    }else{
        next('/my')
    }
})

全局的解析守卫(不常用)
全局的后置守卫 router.afterEach(fn)
1. 可以做一些用户友好提示
2. 与全局前置守卫参数相同

路由独享守卫 beforeEnter(to,from,next)

写在路由表中的守卫钩子
针对的是和当前路由相关的，那么其他与之不相关的路由，它是无法监听它的变化情况的
可用于用户权限管理
与全局前置守卫参数相同

const routes = [
     {
         path: '/',
         redirect: '/home'
     },
     {
         path: '/home',
         component: Home
     },
     {
         path: '/category',
         component: Category,
         beforeEnter ( to,from,next ) {
         alert('您要进入吗')
         next()
         //业务： 用户权限管理
         }
     },
     {
         path: '**',
         redirect: '/error'
     }
  ]

组件内守卫

组件内的前置守卫beforeRouteEnter((to,from,next)=>{})
- 导航进入组件时，调用
- 因为组件此时没有创建，所以没有this
- this是访问不到的，如果非要访问this ,必须通过 next(vm=>{})访问
- 案例：数据预载（进入组件前就获得数据）
```
    next(vm => { //vm指的就是组件
       const result = JSON.parse(res.data.slice(7,-1)).rp_result.categorys
       vm.$set(vm.category,'categorys',result)
     })
```

组件内的后置守卫

离开组件时，调用
this是可以访问到

beforeRouteLeave (to, from, next) {
    //我们现在已经要离开这个组件，那么这个组件身上的数据和方法等内容我们肯定可以获取到，也就是说这里可以使用 this
    if( this.username || this.password){
    if( confirm('您已经填写结束了吗?')){
        next()
    }else{
        next(false)
    }
    }else{
    	next()
    }
}

组件内的更新守卫（路由传参和路由的接参）
1. 在当前路由改变，但是该组件被复用时调用
2. 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
3. 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
4. 可以访问组件实例 this
```
 beforeRouteUpdate ( to,from,next ) { //动态路由用
     console.log('路由改变了')
     next()
 }
```