重置路由，而不是向当前路由添加新路由

Question

我想创建一个路由器导航并防止404错误。当将有效的URL处理为无效的URL时，下一个路由器链接将不再起作用。我创建了一个有效的示例

https://codesandbox.io/s/8l60y06pmj

要查看此问题，请执行以下步骤：

• 单击导航到第2页的链接

• 将网址https://8l60y06pmj.codesandbox.io/#/pageTwo更改为https://8l60y06pmj.codesandbox.io/#/pageTwo/whateverYouLike

• 单击导航到第3页的链接

现在您应该具有以下网址

https://8l60y06pmj.codesandbox.io/#/pageTwo/pageThree

但正确的URL应该是

https://8l60y06pmj.codesandbox.io/#/pageThree

您可以通过单击导航到主视图的链接来重置此行为。

我该如何解决？

Answer 1

您需要在NavbarComponent.vue的两个页面链接中添加一个/；更改后，它应该看起来像这样。

<router-link to="/pageTwo">Page Two</router-link> | 
<router-link to="/pageThree">Page Three</router-link>

没有这个斜杠，您实际上并没有告诉Vue Router将用户发送到新页面。

Here's a working version of your CodeSandbox。