vue-router 导航守卫路由守卫

最新推荐文章于 2024-05-02 17:08:02 发布

... 余

最新推荐文章于 2024-05-02 17:08:02 发布

阅读量1.4k

点赞数

文章标签： javascript vue.js 开发语言前端 es6

本文链接：https://blog.csdn.net/qq_39287762/article/details/124349528

版权

本文详细介绍了Vue.js中的路由导航守卫，包括全局守卫、组件内守卫和独享守卫，如beforeEach、afterEach、beforeRouteEnter等。同时，讨论了路由守卫的参数，特别是next函数的使用，如在不同场景下判断token是否存在来决定页面跳转。此外，还提到了在Vue2与Vue3、Vue Router 3.x与4.x版本中next参数的变化。

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

一. 什么是路由导航守卫？

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

二. 路由导航守卫有几种？分别是什么？

全局守卫
beforeEach 路由进入之前
afterEach 路由进入之后
组件内守卫
beforeRouteEnter 路由进入之前
beforeRouteUpdate 路由更新之前
beforeRouteLeave 路由离开之前
独享守卫
beforeEnter 路由进入之前

三. 路由守卫的参数？

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

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

四. next的参数问题？

next 参数除了括号里可以是空和路径之外还可以是一个回调函数（回调函数就是一个被作为参数传递的函数）
比如说 token 被存进 vuex 里就能这么写：
next 参数除了括号里可以是空和路径之外还可以是一个回调函数（回调函数就是一个被作为参数传递的函数）
比如说 token 被存进 vuex 里就能这么写：

  beforeRouteEnter(to, from, next) {
    // if (localStorage.getItem("token")) {
    //   next();
    // } else {
    //   next("/login");
    // }
    // 在这个组件路由守卫钩子函数中 没有this值 
    // 因为组件实例还没有创建出来
    next((vm) => {
      // vm就是 这个组件实例 就是this
      if (vm.$store.state.token) {
        next();
      } else {
        next("/login");
      }
    });
  },