vue 写路由拦截会死循环

时间: 2023-05-10 22:01:18 浏览: 452

解决vue-router路由拦截造成死循环问题

5星 · 资源好评率100%

Vue Router 是 Vue.js 应用中的前端路由管理库，它允许我们通过 URL 来控制页面的导航和组件的渲染。在开发过程中，我们有时需要在路由跳转前进行一些预处理，比如验证用户权限，这就需要用到路由守卫（Navigation Guards）。然而，如果不正确地设置这些守卫，可能会导致死循环的问题。在给定的例子中，开发者遇到了一个路由拦截导致的死循环问题。初始的路由配置如下： ```javascript const router = new Router({ routes: [ { path: '/login', name: 'login', component: Login, meta: { isShow: true } }, { path: '/', component: Layout, redirect: '/home', meta: { title: "首页菜单" }, children: [...] } ] }) ``` 最初的路由守卫代码如下： ```javascript router.beforeEach((to, from, next) => { if (!to.meta.isShow && !sessionStorage.getItem("token")) { return next('/login'); } next(); }) ``` 这段代码的目标是在用户没有登录（即 `sessionStorage` 中没有 `token`）并且试图访问需要登录才能进入的页面时，将用户重定向到登录页。然而，它允许用户在有 `token` 的情况下访问登录页，这与实际需求不符。为满足项目需求，开发者尝试修改代码，但不慎造成了死循环： ```javascript router.beforeEach((to, from, next) => { if (sessionStorage.getItem("token")) { if (to.meta.isShow) { next('/home') } else { next() } } else { next('/login'); } }) ``` 这个修改版的问题在于，当用户已经登录并试图访问登录页时，它会始终重定向到首页，而当用户试图访问其他需要登录的页面时，又会不断地重定向回登录页，形成死循环。解决这个问题的关键在于正确处理所有可能的路径和状态。最终修复的代码如下： ```javascript router.beforeEach((to, from, next) => { if (sessionStorage.getItem('token')) { if (to.path == '/login') { next('/home'); // 当token存在且试图访问登录页时，重定向到首页 } else { next(); // 其他情况，直接进行路由跳转 } } else { if (to.path == '/login') { next(); // 当token不存在且试图访问登录页时，允许访问 } else { next('/login'); // 当token不存在且试图访问其他页面时，重定向到登录页 } } }); ``` 这段代码解决了死循环的问题，因为它区分了用户是否已登录以及他们尝试访问的页面。只有在特定条件下，才会执行 `next('/home')` 或 `next('/login')`，避免了无休止的重定向。关于 Vue Router 导航守卫的无限循环问题，官方解释是因为在每次路由改变时，全局守卫会被触发。如果守卫中的条件始终不变，就会持续调用 `next()` 导致循环。为了避免这种情况，我们需要确保在 `next()` 前的条件判断能够正确地反映用户的状态和目标路径。此外，提到了一个与 Vue Router 相关的 Promise 问题，可能是由于重复调用 `router.push` 导致的。Vue Router 提供了一个原始的 `push` 方法，可以使用 `originalPush` 进行替换来解决这类问题： ```javascript const originalPush = Router.prototype.push; Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err); } ``` 这段代码为 `push` 方法增加了错误处理，使得在遇到错误时不会导致程序中断，而是捕获并处理错误。总结来说，解决 Vue Router 路由拦截造成的死循环问题，关键在于理解导航守卫的工作原理，以及在编写守卫时充分考虑所有可能的路径和用户状态，确保每次 `next()` 的调用都是合理的。同时，注意处理可能的异常情况，以保持应用的稳定运行。

在Vue中，路由拦截是通过beforeEach函数来进行的。但是如果在beforeEach函数中做了改变当前路由的操作，比如使用router.push()函数来跳转到另一个路由，那么会导致beforeEach函数又被调用，进入死循环状态。例如，如果在beforeEach函数中，我们检查用户是否已经登录，如果未登录则使用router.push()函数来跳转到登录页面，但这时候beforeEach函数又会被调用，又会检查用户登录情况，从而重复操作导致死循环。解决这个问题的方法是，使用next()函数来确保beforeEach函数只会被调用一次。当需要跳转到另一个路由时，应该使用next(false)来阻止路由跳转而不是使用router.push()函数。同时，在路由拦截前，建议先检查路由是否已经存在，避免重复添加拦截器导致死循环。总之，路由拦截是Vue中非常重要的一部分，但要避免死循环和其他问题，需要注意使用next()函数以及避免重复添加拦截器。

阅读全文

vue 写路由拦截会死循环

相关推荐

自定义指令和路由守卫进行权限拦截, vue后台管理系统

vue 路由拦截Maximum call stack size exceeded

详解vue beforeEach 死循环问题解决方法

Vuerouter的beforeEach与afterEach钩子函数的区别

uniapp vue3路由配置

ta-lib-0.5.1-cp312-cp312-win32.whl

在线实时的斗兽棋游戏，时间赶，粗暴的使用jQuery + websoket 实现实时H5对战游戏 + java.zip课程设计

ta-lib-0.5.1-cp310-cp310-win-amd64.whl

基于springboot+vue物流系统源码数据库文档.zip

ERA5_Climate_Moisture_Index.txt

自然语言处理.txtdsdfhgxnc

333498005787635解决keil下载失败的文件.zip

python实现的微信机器人：过模拟微信客户端的行为，自动处理消息、发送消息的程序

基于springboot实验室研究生信息管理系统源码数据库文档.zip

汇川技术-包装行业工艺手册

python批量处理Word文件完整源码分享给需要的同学

基于springboot+Javaweb的二手图书交易系统源码数据库文档.zip

基于springboot餐品美食论坛源码数据库文档.zip

最新推荐

vue路由拦截器和请求拦截器知识点总结

vue 实现axios拦截、页面跳转和token 验证

vue 解决路由只变化参数页面组件不更新问题

vue路由切换时取消之前的所有请求操作

vue router路由嵌套不显示问题的解决方法

MATLAB实现小波阈值去噪：Visushrink硬软算法对比

管理建模和仿真的文件

【交互特征的影响】：分类问题中的深入探讨，如何正确应用交互特征

c语言从链式队列 中获取头部元素并返回其状态的函数怎么写

易语言实现画板图像缩放功能教程

c语言从链式队列中获取头部元素并返回其状态的函数怎么写