vue3中使用路由守卫(简单易懂哦)

使用场景

我们在进行项目的实际开发中,可能会遇到一个问题:“如果我们没有登录的时候一些页面不能被访问该怎么去处理?”,这时候就需要我们的路由守卫了,路由守卫常用的有三种,全部在下方详细解释啦!

beforeEach (全局前置守卫)

全局前置守卫是配置在全局的路由js文件中

话不多说,直接上代码:

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

全局前置守卫中三个参数:tofrom,next

to:to 表示去往哪个路由
from:from 表示从哪个路由离开
next: next 是一个方法,代表的是是否展示路由页面,如果不使用next方法,那么指定页面无法显示

实战场景: 在进行登录权限时候进行使用,非常好用!!!

beforeEnter (路由独享守卫)

路由独享守卫配置在路由js文件中的每一个独立路由配置项中

话不多说,直接上代码:

        beforeEnter:((to,from,next)=>{
            // next()
            if (!localStorage.getItem('token')) {
                if (to.name === 'home') {
                    next()
                }
                else {
                    router.push('/home/articleList')
                }
            } else {
                next()
            }
        })

beforeRouteEnter (组件内部守卫)

在你要设置的组件内部使用,和data同级

话不多说,直接上代码:

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 不能获取组件实例 
    // 因为当守卫执行前,组件实例还没被创建
  }

在全局守卫beforeEach(to, from, next)和独享守卫beforeEnter(to, from, next)之后调用!!!

小结:路由守卫能够帮助我们判断用户的登录状态,从而对用户未登录时做一些限制,这三种路由守卫是经常使用的,善于使用路由守卫也为后端进行路由权限管理提供了方便,同时能够大大提高开发效率!!!

vue-router官方文档解析路由守卫

原 创 不 易 , 还 希 望 各 位 可 以 支 持 一 下 \textcolor{blue}{原创不易,还希望各位可以支持一下}

👍 点 赞 , 你 的 认 可 是 我 创 作 的 动 力 ! \textcolor{green}{点赞,你的认可是我创作的动力!}

⭐️ 收 藏 , 你 的 青 睐 是 我 努 力 的 方 向 ! \textcolor{green}{收藏,你的青睐是我努力的方向!}

✏️ 评 论 , 你 的 意 见 是 我 进 步 的 财 富 ! \textcolor{green}{评论,你的意见是我进步的财富!}

  • 22
    点赞
  • 47
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 15
    评论
Vue3路由守卫有三种类型:全局前置守卫、独享守卫和组件内部守卫。 全局前置守卫是在路由跳转之前触发的,它可以用于分析、更改页面标题、声明页面等辅助功能。通过在路由配置使用`router.afterEach`方法,我们可以在全局后置守卫设置跳转后页面的标题。 独享守卫是针对特定路由配置的守卫,它可以直接在需要设置权限的路由配置编写代码。独享守卫的代码逻辑和全局前置守卫相同,可以直接复制过来使用。在独享守卫,我们可以检查用户是否有权限访问该路由,并根据需要进行相应的操作。 组件内部守卫是在组件内部使用的守卫,它可以根据需要在组件的生命周期钩子函数进行相关操作。例如,我们可以在组件的`beforeRouteEnter`钩子函数判断用户是否已登录,并决定是否允许进入该组件。组件内部守卫的使用方式与全局前置守卫和独享守卫略有不同,但它们都可以实现类似的功能。 总结来说,全局前置守卫是在每次路由跳转之前触发,用于全局的配置和操作;独享守卫是针对特定路由配置的守卫,可以控制特定路由的访问权限;组件内部守卫是在组件内部使用的守卫,可以根据组件的生命周期进行相关操作。这三种类型的路由守卫Vue3都有各自的用途和区别。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue3路由守卫](https://blog.csdn.net/qq_54334713/article/details/126721576)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue 利用路由守卫判断是否登录的方法](https://download.csdn.net/download/weixin_38542148/12951360)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小白在前进

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值