vue-router - Vue2中多页面的路由问题？

Question

多页面的配置如下：

// 主页
index: { 
    entry: './src/main.js', 
    template: './public/index.html', 
},
// 充值中心
recharge_center: {
    entry: './src/external/pages/Recharge/recharge.js',
    template: './public/Recharge.html'
},

在充值中心配置的路由守卫是想在访问 http://localhost:9000/recharge-center/xxx不存在的页面时重定向到充值中心页面，即 http://localhost:9000/recharge-center，但实际上却会重定向到主页，在控制台也可以看到没有进入充值中心的路由守卫钩子函数，而是进入了主页的钩子函数。

主页的路由:

router.beforeEach((to,from,next) => {
  if(to.matched.length == 0){
    // 未匹配到路由就返回主页
    console.log('进入了主页的路由守卫');
    next('/drive/index');
  }
  next();
});

充值中心的路由:

router.beforeEach((to, from, next) => {
    console.log('进入了充值中心的路由守卫');
    if (to.matched.length == 0) {
        next('/recharge-center');
    }
    next();
});

望解答

Answer 1

因为先执行了全局的路由守卫，所以你得在全局路由守卫里对 'recharge-center' 相关路由进行特殊处理，让它继续走下去

router.beforeEach((to,from,next) => {
  if(to.matched.length === 0 && !to.path.includes('recharge-center')){ // 在这里排除 recharge-center 相关路由
    // 未匹配到路由就返回主页
    console.log('进入了主页的路由守卫');
    next('/drive/index');
  }
  next();
});

之后你配置在 recharge_center 中的路由守卫才能执行