vue-router before each 无限循环 已解决

简介：
Vue Router 是 Vue.js 应用中的路由控制模块，它支持配置并维护应用的路由架构。在使用该组件时，`beforeEach` 赋予了路由变更前的保护机制，负责执行权限验证、数据预加载等功能以提升用户体验。然而，若误操作触发 `beforeEach` 的 `next` 方法，可能导致浏览器在无故停止时出现无法导航的情况，这通常源于对该跳转函数的不当调用。在提供的代码示例中，`beforeEach` 的触发点负责检测用户是否已登录：该函数被用来确认用户登录状态。```javascript router.beforeEach((to, from, next) => { if (isLogin) { next() } else { console.log(测试) next(login) } }) ```在示例中，变量`isLogin`被用来确定用户是否已经完成了登录。如果用户已经成功登录，则会执行函数`next()`。这将允许 navigate 过程继续前往指定的路由。如果没有成功登录，则会输出一条提示信息，并尝试将用户重定向到登录页面的函数`next(login)`会被调用。问题在于，在执行`next(...)`操作时，如果目标页面（...）也需要调用相同的`beforeEach`守护，则该守护会被重复触发。这是因为，当我们执行`next(login)`时，实际上是在指示Vue Router重新路由到指定路径。这将导致进入一个持续的恶性循环。为了解决这一问题，我们必须保证，在执行`next(login)`操作时，登录页面不会受到当前守护的干扰，并且需要通过登录页面本身的逻辑来处理此情况，并防止再次触发守护的行为。一个可行的解决方法是在代码中增加一个额外的条件，以判断目标路由是否属于登录页面：```javascript router.beforeEach((to, from, next) => { if (isLogin || to.path === login) { next() } else { console.log(测试) next(login) } }) ``` 当用户发起请求时，守卫将在请求登录过程中授权其继续导航，从而避免出现死循环的情况。此外，我们还可以利用 `next(false)` 来阻止当前的导航操作。一般情况下，这种行为是旨在避免引导用户进行不符合预期的操作。在这种情况下，由于我们想要引导用户转向其他地方，因此无需使用 `next(false)`。Vue Router的官方文档明确说明，在调用导航组件之前不能再不执行`next()`方法，否则将触发死循环。掌握两者的使用区别对于正确配置路由管理至关重要。其中`next()`指令立即终止守护检查，而像`next(xxx)`这样的语法则会启动相应的跳转逻辑。掌握 `beforeEach` 运行机制并正确实施 next 方法对于规避 Vue Router 中无限循环问题至关重要。开发路由保护措施时，必须审慎处理转向操作，以防止多余的守护循环出现。此外，对于每个路径的访问权限设置应保持简洁明了，避免彼此间造成不必要的互相影响。