导航守卫又称为路由守卫

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

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

路由进阶部分 – 导航守卫( 路由守卫 )
  1. 作用: — 类似 【保安】

    • 守卫路由
        • 举例: 携带数据进
        • 举例: 事情完成才能出
  2. 导航守卫一共有三种形式

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

      1. 全局前置守卫 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')
          }
      })
      
      1. 全局的解析守卫(不常用)
      2. 全局的后置守卫 router.afterEach(fn)
        1. 可以做一些用户友好提示
        2. 与全局前置守卫参数相同
    2. 路由独享守卫 beforeEnter(to,from,next)

      1. 写在路由表中的守卫钩子
      2. 针对的是和当前路由相关的,那么其他与之不相关的路由,它是无法监听它的变化情况的
      3. 可用于用户权限管理
      4. 与全局前置守卫参数相同
      const routes = [
           {
               path: '/',
               redirect: '/home'
           },
           {
               path: '/home',
               component: Home
           },
           {
               path: '/category',
               component: Category,
               beforeEnter ( to,from,next ) {
               alert('您要进入吗')
               next()
               //业务: 用户权限管理
               }
           },
           {
               path: '**',
               redirect: '/error'
           }
        ]
      
    3. 组件内守卫

      1. 组件内的前置守卫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)
             })
        
      2. 组件内的后置守卫

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

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

总结 路由导航守卫

  1. 3种类型 7个路由监听钩子
  2. 业务:
    • 监听整个项目的路由变化情况
      • 全局的前置守卫
    • 监听某个路由的变化情况
      • 路由的独享守卫
    • 监听的路由组件的路由变化情况
      • 组件内的导航守卫
### Vue.js 导航守卫的使用方法 Vue Router 提供了一种机制来拦截导航并执行逻辑操作,这种机制被称为 **导航守卫**。它们可以用于验证权限、加载数据或取消导航。 #### 全局前置守卫 全局前置守卫会在每次路由跳转之前被调用。它接收三个参数:`to`(目标路由)、`from`(当前路由)以及 `next`(继续函数)。如果未调用 `next()`,则不会进入下一个钩子或者完成导航[^1]。 ```javascript const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { console.log('Global Guard:', to.path); if (to.meta.requiresAuth && !isAuthenticated()) { next('/login'); // 如果需要认证但未登录,则重定向到登录页 } else { next(); // 继续导航 } }); ``` #### 路由独享守卫 特定于某个路由组件的守卫可以通过定义该组件内的 `beforeRouteEnter`, `beforeRouteUpdate`, `beforeRouteLeave` 方法实现。这些方法允许我们在访问此组件前/更新时/离开时执行自定义逻辑。 ```javascript export default { beforeRouteEnter(to, from, next) { console.log('Entering component...'); next(vm => { /* 只有当组件实例化之后才能访问 */ }); }, beforeRouteUpdate(to, from, next) { this.message = 'Updating route...'; next(); }, beforeRouteLeave(to, from, next) { const answer = window.confirm('Do you really want to leave?'); if (answer) next(); } } ``` #### 全局解析守卫 类似于 `beforeEach` 的作用范围,但它主要用于处理异步请求或其他耗时任务,在所有导航完成后触发。 ```javascript router.beforeResolve((to, from, next) => { setTimeout(() => { console.log('All async components are resolved.'); next(); }, 1000); // 延迟一秒模拟等待时间 }); ``` #### 后置钩子 后置钩子不同于前面提到的守卫之处在于它不接受 `next` 函数也不会改变导航过程。它可以用来记录分析日志等用途。 ```javascript router.afterEach((to, from) => { ga('send', 'pageview', to.fullPath); // 发送Google Analytics事件跟踪 }); ``` 以上就是关于 Vue.js导航守卫的一些基本概念及其具体使用的介绍。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值