命名路由

观看 Vue School 的免费视频课程

创建路由时，我们可以选择性地为路由指定一个 name

const routes = [
  {
    path: '/user/:username',
    name: 'profile', 
    component: User
  }
]

然后，我们可以使用 name 而不是 path，将 to 属性传递给 <router-link>

<router-link :to="{ name: 'profile', params: { username: 'erina' } }">
  User profile
</router-link>

上面的示例将创建一个指向 /user/erina 的链接。

• 在 Playground 中查看.

使用 name 有多种优势

• 没有硬编码的 URL。
• 自动编码 params。
• 避免 URL 键入错误。
• 绕过路径排名，例如显示与相同路径匹配的排名较低的路由。

每个名称在所有路由中都必须是唯一的。如果将相同的名称添加到多个路由，路由器只会保留最后一个。您可以在 动态路由 部分了解更多信息。

Vue Router 的其他部分可以传递位置，例如 router.push() 和 router.replace() 方法。我们将在指南中详细介绍这些方法，以了解 编程导航。与 to 属性一样，这些方法也支持通过 name 传递位置

router.push({ name: 'profile', params: { username: 'erina' } })