什么是vue路由守卫？vue-router有哪几种路由守卫？

薛三岁.

已于 2023-08-16 17:04:55 修改

阅读量241

点赞数 1

文章标签：前端服务器运维

于 2023-08-06 19:31:43 首次发布

本文链接：https://blog.csdn.net/m0_62241283/article/details/132134422

版权

③ 独享路由守卫（某一个路由所单独享用的路由守卫）

④ 组件内守卫（某一个路由所单独享用的路由守卫）

总结：

什么是路由呢？

路由其实是一种映射关系。

生活中的路由：设备和ip的映射关系；

node.js路由：接口和服务的映射关系；

（前端）Vue中的路由：路径和组件的映射关系。

路由守卫的使用场景？

首先，如何给路由添加一个权限判断呢？例如，用户在登录的状态下就能去到某页面，但是未登录则给你弹出一个未登录的提示。

路由守卫的目标是实现这样一个权限判断，在路由跳转之前，会触发一个函数.

什么是路由守卫呢？

如果在面试中被问到了这个，比较完美的答案如下：

路由守卫又称导航守卫，指是路由跳转前、中、后过程中的一些钩子函数。官方解释是vue-router提供的导航守卫，要通过跳转或取消的方式来守卫导航。路由守卫分为三种，全局路由、组件内路由，路由独享。

vue-router有哪些路由守卫

全局路由钩子函数有

1.全局前置守卫
beforeEach 在进入路由前执行的钩子函数，它会接收三个参数：to(要进入的路由对象)、from(当前导航正要离开的路由对象)和 next(必须调用该函数才能进入下一个钩子)。

2.全局解析守卫
　beforeResolve 在路由解析之前执行的钩子函数，也会接收 to、from 和 next 参数。与 beforeEach 的区别在于，该守卫在全局守卫中被最后调用，因此它在所有路由组件内的守卫和异步路由组件被解析之后才被调用。

3.全局后置钩子
　afterEach 在进入路由后执行的钩子函数，它不接收 next 函数，也不能改变导航。

路由独享的钩子函数有

1.路由独享守卫
　　beforeEnter 在路由配置中定义的钩子函数，它会在路由被激活之前调用。它和全局前置守卫的参数一样，但是只对该路由生效。

组件内路由的钩子函数有：

局部守卫：

beforeRouteEnter:因为当守卫执行前，组件实例还没被创建,不能获取组件实例的this

beforeRouteUpdate: 在当前路由改变，但是该组件被复用时调用，可以访问组件实例 this

beforeRouteLeave:导航离开该组件的对应路由时调用，可以访问组件实例 this

每个守卫方法接收三个参数：

to:目标路由对象

from:准备要离开的路由

next():进行管道中的下一个钩子。可传递参数有布尔值false，直接写路径'/'或{path:'/'},回调函数

注意：如果不调用next，那么页面会留在原地

后置钩子函数afterEach不会接受next函数也不会改变导航本身。

全局路由在真正跳转之前，会执行一次beforeEach函数，next调用则跳转，也可以强制修改要跳转的路由。

【路由守卫写在main.js文件，或者写在router文件夹下的index.js文件】

举例：

① 前置路由守卫（每次切换前被调用）

首先先在需要配置路由守卫的地方加上 meta: { isAuth: true }

    {
        path: '/',
        name: 'Home',
        component: () => import('../views/Home.vue'),
        meta: { isAuth: true, title:'主页' },
    },

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
    //如果路由需要跳转
    if (to.meta.isAuth) {
        //判断 如果school本地存储是qinghuadaxue的时候，可以进去
        if (localStorage.getItem('school') === 'qinghuadaxue') {
            next()  //放行
        } else {
            alert('抱歉，您无权限查看！')
        }
    } else {
        // 否则，放行
        next()
    }
})

② 后置路由守卫（每次切换后被调用）

是路由跳转之后执行的事件，可以用作跳转路由后更改网页名

首先路由的meta需要配置title的名字

    {
        path: '/',
        name: 'Home',
        component: () => import('../views/Home.vue'),
        meta: { isAuth: true, title:'主页' },
    },

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to, from) => {
    document.title = to.meta.title || '默认名'    //修改网页的title
})

③ 独享路由守卫（某一个路由所单独享用的路由守卫）

独享路由守卫只有前置没有后置

    {
        path: '/',
        name: 'Home',
        component: () => import('../views/Home.vue'),
        meta: { isAuth: true },
        beforeEnter: (to, from, next) => {
            if (to.meta.isAuth) { //判断是否需要授权
                if (localStorage.getItem('school') === 'qinghuadaxue') {
                    next()  //放行
                } else {
                    alert('抱歉，您无权限查看！')
                }
            } else {
                next()  //放行
            }
        }
    },

④ 组件内守卫（某一个路由所单独享用的路由守卫）

独享路由守卫只有前置没有后置，直接写在.vue文件中

//通过路由规则，进入该组件时被调用
beforeRouteEnter(to,from,next) {
  if(toString.meta.isAuth){
    if(localStorage.getTime('school')==='qinghuadaxue'){
      next()
    }else{
      alert('学校名不对，无权限查看！')
    }
  } else{
    next()
  }
},
 
//通过路由规则，离开该组件时被调用 
beforeRouteLeave(to,from,next) {
 next()
}