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

使用场景

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

beforeEach （全局前置守卫）

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

话不多说，直接上代码：

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

全局前置守卫中三个参数：to，from,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官方文档解析路由守卫

✨$原创不易，还希望各位可以支持一下$

$点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$