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 使用路由守卫可以通过 `beforeRouteEnter`、`beforeRouteUpdate` 和 `beforeRouteLeave` 方法来实现。 1. `beforeRouteEnter`: 在进入路由前执行,可以获取组件实例、路由信息和回调函数。 ```javascript const router = createRouter({ routes: [ { path: '/example', component: Example, beforeEnter: (to, from, next) => { // 执行一些逻辑操作 next() } } ] }) ``` 2. `beforeRouteUpdate`: 在当前路由更新时执行,可以获取组件实例和路由信息。 ```javascript const Example = { template: `<div>{{ this.$route.params.id }}</div>`, beforeRouteUpdate (to, from, next) { // 执行一些逻辑操作 next() } } ``` 3. `beforeRouteLeave`: 在离开当前路由前执行,可以获取组件实例和路由信息。 ```javascript const Example = { template: `<div>{{ this.$route.params.id }}</div>`, beforeRouteLeave (to, from, next) { // 执行一些逻辑操作 next() } } ``` 以上三个方法都接收三个参数:to、from 和 next。其,to 表示即将进入的路由对象,from 表示即将离开的路由对象,next 是一个回调函数,用于进入下一个钩子或路由。如果需要终止路由导航,则可以在 next 方法传入 false。 例如,下面的代码实现了一个登录路由守卫: ```javascript const router = createRouter({ routes: [ { path: '/login', component: Login }, { path: '/home', component: Home, meta: { requiresAuth: true } } ] }) router.beforeEach((to, from, next) => { const isAuthenticated = localStorage.getItem('token') if (to.matched.some(record => record.meta.requiresAuth)) { if (!isAuthenticated) { next({ path: '/login', query: { redirect: to.fullPath } }) } else { next() } } else { next() } }) ``` 在上面的代码,我们使用 `beforeEach` 方法来定义全局的路由守卫,检查用户是否已经登录。如果用户没有登录,则将其重定向到登录页面,并将当前路由的路径信息保存在 `query` 参数。如果已经登录,则直接进入下一个路由。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

前端小白在前进

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

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

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

打赏作者

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

抵扣说明:

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

余额充值