Question

我刚遇到一个奇怪的问题，我不知道如何解决它。这是一些路由配置的示例：

routes: [
  {
    path: '/signin',
    name: 'signin',
    component: SignIn
  },
  {
    path: '/message/:messageType',
    name: 'message',
    component: Message,
    props: true
  }
]

导航到各种路由非常有效，但是当我在Message组件上并尝试导航到任何其他路由时，问题就出现了。我的网址看起来像这样：

https://localhost:8080/message/somemessage

当我点击登录链接时，我得到了这条路径：

https://localhost:8080/message/signin

而不是

https://localhost:8080/signin

我正在使用常规路由器链接：

<router-link to="signin">Sign In</router-link>

我认为它在最近的路线上匹配，但这对我来说是一个问题。

Answer 1

请参阅命名路由的文档：Vue Router, named routes。我想你需要这样写你的链接：

<router-link :to="{ name: 'NAME_OF_ROUTE', params: { userId: 123 }}">User</router-link>

换句话说，我认为您需要为to属性提供一个具有name属性的对象。

Answer 2

根据Api/router-link的文档，to属性是相对于根的相对路径：

目标位置由to道具指定。它呈现为默认情况下，<a>标签具有正确的href

因此，如果您想使用router-link元素而不传递对象，我认为您必须使用设置为path的属性，而不要使用name属性：

<router-link to="/signin">Sign In</router-link>

Vuejs路由器3.0.1路径问题

2 个答案: