vue2的路由守卫

最新推荐文章于 2024-08-24 09:00:00 发布

若枫~~

最新推荐文章于 2024-08-24 09:00:00 发布

阅读量4k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/ch2362710931/article/details/124352719

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍了Vue2中路由的导航守卫，包括全局守卫、组件内守卫和独享守卫的使用，重点讲解如何在路由跳转时进行权限验证。例如，在购物车页面，通过组件级守卫检查本地存储或Vuex中的token来决定是否允许访问，未登录则重定向至登录页面。此外，还提到了next参数在不同Vue Router版本中的变化及其使用方式。

摘要由CSDN通过智能技术生成

vue2的路由守卫

路由的导航守卫又叫做路由的钩子函数（生命周期函数）
就是在跳转页面的时候把路由拦下来做一些操作再放行
一共有三种

第一种是全局守卫
beforeEach 路由进入之前
afterEach 路由进入之后

第二种组件内守卫
beforeRouteEnter 路由进入之前
beforeRouteUpdate 路由更新之前
beforeRouteLeave 路由离开之前

第三种
独享守卫
beforeEnter 路由进入之前

有三个参数
to from next
next 这个参数在路由 3.x 版本的时候是必须的
但是到了路由 4.x 版本的时候 next 参数变成可选的了

一般来说 vue2 搭配 3.x 的路由
vue3 搭配 4.x 的路由

比如说购物车页面只有登陆的才能访问我们可以用组件级守卫守卫购物车页面
如果已经登陆存的有 token 的话就继续访问这个页面如果没有登陆的话就会跳转到登陆页面

beforeRouteEnter(to, from, next) {
    if (localStorage.getItem("token")) {
      next();
    } else {
      next("/login");
    }

next 参数 除了括号里可以是空和路径之外 还可以是一个回调函数（回调函数就是一个被作为参数传递的函数）

比如说 token 被存进 vuex 里就能这么写：

 beforeRouteEnter(to, from, next) {
    // if (localStorage.getItem("token")) {
    //   next();
    // } else {
    //   next("/login");
    // }
    next((vm) => {
      // vm就是 这个组件实例 就是this
      if (vm.$store.state.token) {
        next();
      } else {
        next("/login");
      }
    });
  },