Javascript vue路由器&x27；在每个警卫偶尔表现出怪异行为之前

我有以下代码：

const routes = [
    { path: '/', component: FooView },
    { path: '/bar', component: BarView } 
];

const router = new VueRouter({
    routes
});

router.beforeEach(function(to, from, next) {
    if (to.path === '/bar') {
        next('/');    
    }

    next();
});

如果我遗漏了太多内容，而您需要查看与路由器相关的其他代码，请告诉我，以便我可以填写

如果我打开一个新选项卡并导航到“/#/bar”，我将成功重定向到“/#”。但是，如果我进入地址栏并手动添加“/#/bar”并按enter键，则不会重定向。如果我再次点击地址栏中的回车键，我将被重定向

我在控制台中浏览了代码，我看到它正在调用

next（'/'）

，我看到它在

next（'/'）

的内部调用

push（'/'）

，但直到我第二次在地址栏中按enter键，它才生效

我尝试过使用

router.replace（'/'）

，但行为相同。我尝试在单独的路线上使用

之前进入

，但行为也是一样的

在讨论类似行为时，我发现了两个联系：和，但都没有帮助我

---

有人能解释这一点吗？我正在尝试的操作与vue router提供的功能之间是否存在脱节？如果这种行为不是预期的，有人能提出解决办法吗？

不太激动（还有很多测试要做），似乎我已经设法解决了我的问题

而不是：

router.beforeEach(function(to, from, next) {
    if (to.path === '/bar') {
        next('/');    
    }

    next();
});

我将代码更改为以下内容：

router.beforeEach(function(to, from, next) {
    if (to.path === '/bar') {
        next('/');

        return;
    }

    next();
});

注意添加的

返回

我对这种行为仍有疑问。特别是，我需要更深入地研究为什么有时它会击中路由，而唯一的区别是我是第一次还是第二次在地址栏中输入URL。我相信，下一步深入研究
将回答我的问题

无论如何，添加
返回将其转换为非阻止程序。
在vue路由器官方文档中，不推荐使用实现beforeach（）的方法。以下是文档中的内容：

确保下一个函数在通过导航保护的任何给定过程中只调用一次。它可以多次出现，但前提是逻辑路径没有重叠，否则钩子将永远不会被解析或产生错误。下面是一个未经身份验证时将用户重定向到/login的示例：

// BAD
router.beforeEach((to, from, next) => {
  if (!isAuthenticated) next('/login')
  // if the user is not authenticated, `next` is called twice
  next()
})
// GOOD
router.beforeEach((to, from, next) => {
  if (!isAuthenticated) next('/login')
  else next()
})

不确定为什么第一个示例是一个糟糕的示例，因为两个示例代码在逻辑上应该完全相同。我的代码在第一次使用next（“/”）重定向路径时弹出错误，但是，重新路由仍然成功。正在从专业人士那里寻找答案。
正如其他答案所提到的，应该在同一个防护装置中准确调用
next（）
函数一次。

必须至少调用一次，否则卫兵将永远无法完成并阻止导航

从-->

确保下一个函数在通过导航卫士的任何给定过程中只调用一次。它可以多次出现，但前提是逻辑路径没有重叠，否则钩子将永远不会被解析或产生错误

next（）
函数表示此保护已完成，可以调用下一个保护。

通过这样做，可以创建只有在调用next（）函数时才能完成的异步保护

但是，防护内部的其余代码仍在执行。

这意味着如果多次调用
next（）
，将导致不可预测的行为

//这样就行了
如果（条件）{
next（）；
}
否则{
next（）；
}

//这会让你痛苦！
next（）；
next（）；






“下一步”功能还具有以下参数：
//这将中止当前导航并“停留”在同一路线上
下一个（假）
//它们导航到与“to”参数中指定的路线不同的路线
下一个（“/”）；
下一步（{path:'/'}）
下一步（{path:'/'，query:{urlParam:'value'}}）//或router.push中使用的任何选项->https://router.vuejs.org/api/#router-前进
//如果传递给next的参数是错误实例，
//导航将中止，错误将消失
//将传递给通过router.onError（）注册的回调。
下一步（新错误（“消息”））
你的意思是
路由器。beforewouteenter
而不是
路由器。beforeach
在你的例子中，对吧？嘿@BrianKung我的意思是
beforeach
。我读过的大多数文档在每次使用之前都提到了
，
是我用例的保护。至少我是这样解释我所读到的内容的。我还应该注意，我的用例有不止一条需要这种逻辑的路径，所以像beforeach这样的全局保护更可取。错误的方法。正如@user11871138所提到的，您的代码应该像
js router.beforeach（函数（to，from，next）{if（to.path==='/bar'）{next（'/'）；}else next（）；}）这不是“错误的方式”，next（）不应该在同一个保护中被多次调用。这个解决方案正是我想说的。它们都是正确的——一个使用
else
子句，另一个使用
return
语句。
return
语句阻止执行到达最后一个
next（）
，这与
else
子句非常相似。我喜欢
else
，因为它更干净。
BAD
示例没有
else
子句，因此执行next（'/login'）和next（）。您应该在任何逻辑路径中只执行一次next（）。第二个
GOOD
示例由于
else
子句，只执行下一条语句。我认为这是一个不遵循标准编码实践的例子。如果在
If
语句中使用了大括号，那么错误就显而易见了。