重置路线而不是向当前路线添加新路线
reset route instead of adding a new route to the current one
我想创建一个路由器导航并防止 404 错误。当将有效的 URL 操作为无效的时,下一个路由器 link 将不再工作。我创建了一个工作示例
https://codesandbox.io/s/8l60y06pmj
要查看问题,请执行以下步骤:
单击 link 导航到第 2 页
将urlhttps://8l60y06pmj.codesandbox.io/#/pageTwo
改为https://8l60y06pmj.codesandbox.io/#/pageTwo/whateverYouLike
单击 link 导航至第 3 页
现在你应该有以下内容URL
https://8l60y06pmj.codesandbox.io/#/pageTwo/pageThree
但正确的URL应该是
https://8l60y06pmj.codesandbox.io/#/pageThree
您可以通过单击 link 导航到主视图来重置此行为。
我该如何解决这个问题?
在NavbarComponent.vue
里面,您需要在两个页面链接中添加一个/
;更改后应该看起来像这样。
<router-link to="/pageTwo">Page Two</router-link> |
<router-link to="/pageThree">Page Three</router-link>
如果没有斜杠,您实际上并没有告诉 Vue Router 将用户发送到新页面。
我想创建一个路由器导航并防止 404 错误。当将有效的 URL 操作为无效的时,下一个路由器 link 将不再工作。我创建了一个工作示例
https://codesandbox.io/s/8l60y06pmj
要查看问题,请执行以下步骤:
单击 link 导航到第 2 页
将url
https://8l60y06pmj.codesandbox.io/#/pageTwo
改为https://8l60y06pmj.codesandbox.io/#/pageTwo/whateverYouLike
单击 link 导航至第 3 页
现在你应该有以下内容URL
https://8l60y06pmj.codesandbox.io/#/pageTwo/pageThree
但正确的URL应该是
https://8l60y06pmj.codesandbox.io/#/pageThree
您可以通过单击 link 导航到主视图来重置此行为。
我该如何解决这个问题?
在NavbarComponent.vue
里面,您需要在两个页面链接中添加一个/
;更改后应该看起来像这样。
<router-link to="/pageTwo">Page Two</router-link> |
<router-link to="/pageThree">Page Three</router-link>
如果没有斜杠,您实际上并没有告诉 Vue Router 将用户发送到新页面。