Vuejs 路由器 3.0.1 路径问题

Question

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

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

导航到各种路线完美无缺，但是当我在消息组件上并尝试导航到任何其他路线时，问题就来了。我的 url 看起来像这样：

https://localhost:8080/message/somemessage

当我点击登录 link 时，我得到这个路径：

https://localhost:8080/message/signin

而不是

https://localhost:8080/signin

我使用的是普通路由器-link:

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

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

Answer 1

请参阅命名路由的文档：Vue Router, named routes。我认为您需要这样写 link：

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

换句话说，我认为你需要给 to 属性一个带有 name 属性.

的对象

Answer 2

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

The target location is specified with the to prop. It renders as an <a> tag with correct href by default

因此，如果您想在不传递对象的情况下使用 router-link 元素，我认为您必须使用您设置为 path 的内容，而不是 name 属性:

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

Vuejs 路由器 3.0.1 路径问题

Vuejs router 3.0.1 path issue

javascript

vue.js

vue-router