关于vueRouter next('/') 失败的问题

Question

问题描述

写了一个 vue-router 的 demo ，想实现：

• 进入页面首先重定向到 /index 然后里面有个 <router-link to="/login">to login</router-link> 点击跳转到 /login 页面；
• 但是我在全局守卫里写了，当 to.paht === '/login' 时，会通过 next('/') 在跳到首页；
• 按照正常情况，是会被跳到首页，而不应该进入 /login 页面的；
• 但现在反而是可以进入，并且当使用 http://localhost:8080/#/login 时，第二次在地址栏敲入链接就会自动跳到 /index 但是一次且还是进入 /login;

相关代码

router.js 路由相关的内容

{
    path: '/',
    redirect: '/index'
  },
  {
    path: '/index',
    name: 'index',
    component: Index
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/404',
    name: '404',
    component: PageError
  },
  {
    path: '*',
    redirect: '/404'
  }

main.js 中的全局守卫

router.beforeEach((to, form, next) => {
  console.log('-beforeEach-', to.path)
  if (to.path === '/login') {
    console.log('-login-')
    next('/')
  }
  next()
}）

console 输出的数据

 -beforeEach- /index
 -beforeEach- /login
 -login-

按理说输出了 -login- 应该是会触发 next('/')，进而会再次进入守卫输出 -beforeEach- / 并进入 /index 才对，但实际并没有再次触发 守卫；

问题出现的环境背景及自己尝试过哪些方法

• 试过把 next('/') 改成 next('/a') 这时就能顺利的进入 /404 页面；
• 但是通过url输入 http://localhost:8080/#/login 还是能进入/login页面；
• 试了试发现一个规律，就是当前页面的路径和next('/')相同时，就会跳转失败；

Answer 1

router.beforeEach((to, form, next) => {
  console.log('-beforeEach-', to.path);
  if (to.path === '/login') {
    console.log('-login-');
    next('/');
  } else {
    next();
  }
});

改成这样，按你写法遇到'/login'会执行2次next