vue导航守卫（路由守卫），包括V3、V4版本的区别

news/2024/7/10 23:35:43 标签: vue.js, javascript, 前端, es6, 前端框架

vue导航守卫（路由守卫）简记

vue项目的实际开发场景中，会有根据用户权限或状态加载界面的需求，即在跳转打开相应界面前或者界面刷新或者离开界面要进行判断处理的操作，vue的路由守卫在这一块十分便捷有效。

vue路由router版本V3和V4的细微差别：

V3版本：

javascript">// 官方文档地址：https://v3.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB

官方示例：
V3版本创建router实例的写法
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

V4版本：

javascript">// 官方文档地址：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

官方示例：
V4版本创建router实例的写法：
const router = VueRouter.createRouter({
  routes, // `routes: routes` 的缩写
})

vue路由守卫中提供了全局路由守卫、单个路由独享的路由守卫，组件级路由守卫三种模式。

（一）全局路由守卫：

全局路由守卫就是全局设置的路由守卫，每一个路由都会调用，分为全局前置守卫（beforeEach）、全局解析守卫（beforeResolve）和全局后置钩子（afterEach）。同样的，全局路由守卫在V3版本和V4版本中也有些差别。

全局前置守卫（V3版本）
通过router.beforeEach可以注册一个全局的前置守卫，在每一个路由变化时都会调用一次。示例如下：

javascript">const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
  这里是处理逻辑，根据to、from判断
  // ...
  处理完之后要执行的，执行next函数才会进入下一步
  next()
})

router.beforeEach接收三个参数(to, from, next)，参数说明：

javascript">to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。

next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，
那么 URL 地址会重置到 from 路由对应的地址。

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项，
以及任何用在 router-link 的 to prop 或 router.push 中的选项。

next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

全局前置守卫（V4版本）
与V3版本相同，同样是使用router.beforeEach注册一个全局的前置守卫。
与V3版本不同的是接收的参数变成两个，取消了next()
参数说明：

javascript">每个守卫方法接收两个参数：

to: 即将要进入的目标 用一种标准化的方式
from: 当前导航正要离开的路由 用一种标准化的方式

return可以返回的值如下:
false: 取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
一个路由地址: 通过一个路由地址跳转到一个不同的地址，就像你调用 router.push() 一样，
你可以设置诸如 replace: true 或 name: 'home' 之类的配置。当前的导航被中断，然后进行一个新的导航，就和 from 一样。

示例：

javascript">const router = createRouter({ ... })

router.beforeEach((to, from) => {
  // ...
  这里是处理逻辑
  // 返回 false 以取消导航
  return false
  // 没有了next()函数，通过return返回结果进行下一步
})

return返回的内容也可以重定向目标路由

javascript">const router = createRouter({ ... })

router.beforeEach((to, from) => {
  // ...
  这里是处理逻辑
  // 将用户重定向到登录页面
  return { name: 'Login' }
  // 没有了next()函数，通过return返回结果进行下一步
})

全局解析守卫（V3版本，没有官方示例）
router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

全局解析守卫（V4版本）
用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，因为它在 每次导航时都会触发，但是确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用。这里有一个例子，确保用户可以访问自定义 meta 属性 requiresCamera 的路由：

javascript">router.beforeResolve(async to => {
  if (to.meta.requiresCamera) {
    try {
      await askForCameraPermission()
    } catch (error) {
      if (error instanceof NotAllowedError) {
        // ... 处理错误，然后取消导航
        return false
      } else {
        // 意料之外的错误，取消导航并把错误传给全局处理器
        throw error
      }
    }
  }
})

router.beforeResolve 是获取数据或执行任何其他操作（如果用户无法进入页面时你希望避免执行的操作）的理想位置。

全局后置钩子（V3、V4版本差不多）
router.afterEach可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身， 对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。：
参数to、from与router.beforeEach相同

javascript">router.afterEach((to, from) => {
  // ...
})

（二）路由独享的守卫

V3版本
可以在路由配置上直接定义 beforeEnter 守卫：
接收三个参数(to, from, next)，与router.beforeEach的参数一致

javascript">const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

V4版本（与V3版本相比，去掉next()函数，同时增加可传递一整个函数）
可以直接在路由配置上定义 beforeEnter 守卫：

javascript">const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => {
      // reject the navigation
      return false
    },
  },
]

beforeEnter 守卫 只在进入路由时触发，不会在 params、query 或 hash 改变时触发。例如，从 /users/2 进入到 /users/3 或者从 /users/2#info 进入到 /users/2#projects。它们只有在 从一个不同的 路由导航时，才会被触发。

你也可以将一个函数数组传递给 beforeEnter，这在为不同的路由重用守卫时很有用：

javascript">function removeQueryParams(to) {
  if (Object.keys(to.query).length)
    return { path: to.path, query: {}, hash: to.hash }
}

function removeHash(to) {
  if (to.hash) return { path: to.path, query: to.query, hash: '' }
}

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: [removeQueryParams, removeHash],
  },
  {
    path: '/about',
    component: UserDetails,
    beforeEnter: [removeQueryParams],
  },
]

（三）组件级路由守卫

V3版本

javascript">const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。
可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

javascript">beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。

javascript">beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}

这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

javascript">beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

官方提供的完整路由导航解析流程：

javascript">1、导航被触发。
2、在失活的组件里调用 beforeRouteLeave 守卫。
3、调用全局的 beforeEach 守卫。
4、在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5、在路由配置里调用 beforeEnter。
6、解析异步路由组件。
7、在被激活的组件里调用 beforeRouteEnter。
8、调用全局的 beforeResolve 守卫 (2.5+)。
9、导航被确认。
10、调用全局的 afterEach 钩子。
11、触发 DOM 更新。
12、调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

V4版本（与V3版本相比都去掉了next()函数）
可以为路由组件添加以下配置：

javascript">const UserDetails = {
  template: `...`,
  beforeRouteEnter(to, from) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
  },
  beforeRouteUpdate(to, from) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
  },
}

beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。
不过，你可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数：

javascript">beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持 传递回调，因为没有必要了：

javascript">beforeRouteUpdate (to, from) {
  // just use `this`
  this.name = to.params.name
}

这个 离开守卫 通常用来预防用户在还未保存修改前突然离开。该导航可以通过返回 false 来取消。

javascript">beforeRouteLeave (to, from) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (!answer) return false
}

end

可以直接看官方文档了兄弟们！！！

如果对你有帮助，记得点赞噢（~~）


http://www.niftyadmin.cn/n/304214.html

相关文章

一次业务系统无法使用对应的oracle数据库性能分析过程

一次业务系统无法使用对应的oracle数据库性能分析过程

一、问题概述 自助机系统及其它HIS等相关业务程序从3日早上8:20分左右出现使用异常，通过关闭自助机应用服务器及现场工程师KILL相关锁进程后正常。后续数据库工程师通过远程方式接入数据库环境进行问题排查，通过对相关日志等信息的深入分析，…
阅读更多...
ThingsBoard教程（四十）：规则节点解析 计算增量节点 Calculate delta

ThingsBoard教程（四十）：规则节点解析 计算增量节点 Calculate delta

本篇文章介绍一个ThingsBoard 规则引擎中的一个节点，Calculate delta Calculate delta 计算增量 该节点可以在规则中获取上一次遥测的值，以此可以实现二次遥测的差。比如一个设备，一天上传一次数据，如果你要对比今天和昨天的数据，并将两者数据差保存到数据库，就能够使用…
阅读更多...
【一览无余】Vue框架下Cesium加载遥感地图使用GeoServer切割TIF大文件对外发布WMS服务进行地图绘制（科普篇1/2）

【一览无余】Vue框架下Cesium加载遥感地图使用GeoServer切割TIF大文件对外发布WMS服务进行地图绘制（科普篇1/2）

【一览无余】Vue框架下Cesium加载遥感地图GeoServer WMS服务进行地图绘制（科普篇1/2） 一、初识遥感领域1.1 Geo1.2 3S1.3 遥感卫星1.3.1 遥感卫星分类1.3.2 遥感卫星口径1.3.3 最小口径水平 1.4 遥感地图1.4.1 遥感地图分类1.4.2 谷歌卫星地图1.4.3 高德…
阅读更多...
通过Python的speech_recognition库将音频文件转为文字

通过Python的speech_recognition库将音频文件转为文字

文章目录 前言一、音频准备二、音频声音三、格式转换四、音频转文字1.引入库2.定义音频路径3.创建一个Recognizer对象4.打开音频文件，将音频文件读入Recognizer对象5.尝试使用Google Web API将语音转换为文字6.转换结果 总结 前言 大家好，我是空空star&a…
阅读更多...
golang实现关键路径算法

golang实现关键路径算法

关键路径算法（Critical Path Method，简称CPM）是一种用于项目管理的技术，主要用于计算项目中的关键路径和关键活动。关键路径是指项目中的最长路径，决定了项目的最短完成时间。关键活动是指在关键路径上的活动&#xff…
阅读更多...
科普文：国内ChatGPT怎么用，ChatGPT国内怎么用，关于ChatGPT你需要了解的内容应该都在这

科普文：国内ChatGPT怎么用，ChatGPT国内怎么用，关于ChatGPT你需要了解的内容应该都在这

在国内用了很长一段时间的ChatGPT，每次跟小白，哪怕是用ChatGPT的人交流的时候，都感觉解释不清，正好今天周末，给大家整理一篇关于ChatGPT的科普文，想要了解或使用ChatGPT的人，一定要看~~~&#x…
阅读更多...
python基本数据类型 - 字典集合

python基本数据类型 - 字典集合

引入 在内存中存储的数据可以是不同的数据类型。比如名字可以使用字符串存储，年龄可以使用数字存储，python有6种基本数据类型，用于各种数据的存储，分别是：numbers(数字类型)、string(字符串)、List(列表)、Tuple(元组…
阅读更多...
Apache ECharts 一个基于 JavaScript 的开源可视化图表库

Apache ECharts 一个基于 JavaScript 的开源可视化图表库

一： ECharts 特性 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等）&a…
阅读更多...
最新文章

Copyright @ 2022~2023