---
title: 命名路由
type: vue-router
order: 6
---

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 `routes` 配置中给某个路由设置名称。

``` js
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      name: 'user',
      component: User
    }
  ]
})
```

要链接到一个命名路由，可以给 `router-link` 的 `to` 属性传一个对象：

``` html
<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>
```

这跟代码调用 `router.push()` 是一回事：

``` js
router.push({ name: 'user', params: { id: 123 }})
```

这两种方式都会把路由导航到 `/user/123` 路径。

完整的例子请 [戳这里](https://github.com/vuejs/vue-router/blob/next/examples/named-routes/app.js).

---
title: 命名路由
type: vue-router
order: 6
---

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 `routes` 配置中给某个路由设置名称。

``` js
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      name: 'user',
      component: User
    }
  ]
})
```

要链接到一个命名路由，可以给 `router-link` 的 `to` 属性传一个对象：

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

这跟代码调用 `router.push()` 是一回事：

``` js
router.push({ name: 'user', params: { userId: 123 }})
```

这两种方式都会把路由导航到 `/user/123` 路径。

完整的例子请 [戳这里](https://github.com/vuejs/vue-router/blob/next/examples/named-routes/app.js).

Revert "change userId to id"
Revert "change userId to id"
