Dynamic Route Matching Vue路由(1)

Dynamic Route Matching

动态的 路由 匹配

 

Very often we will need to map routes with the given pattern to the same component. For example we may have a User component which should be rendered for all users but with different user IDs. In vue-router we can use a dynamic segment in the path to achieve that:

需要通过给定的模式去导航路由到相同的模块，比如我们有一个用户组件，它被每个用户所使用，但是每个用户有不同的id。在vue 路由中，我们可以使用一个动态的部分 来实现它。

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // dynamic segments start with a colon
    { path: '/user/:id', component: User }
  ]
})

　　

Now URLs like /user/foo and /user/bar will both map to the same route.

现在 像/user/foo 和 /user/bar 的URLS 将被同时导航到 相同的 地方

A dynamic segment is denoted by a colon :. When a route is matched, the value of the dynamic segments will be exposed as this.$route.params in every component. Therefore, we can render the current user ID by updating User's template to this:

一个动态的部分被: 标志， 当一个路由相匹配时，动态变量的值将会被暴露为this.$route.params，在每一个组件里。因此，我们可以填充当前的用户id通过更新用户组件成这样:

 

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

 

You can have multiple dynamic segments in the same route, and they will map to corresponding fields on $route.params. Examples:

你可以有很多多样的的动态变量在同一个路由里面，他们将映射到对应的部分，在$route.params

pattern	matched path	$route.params
/user/:username	/user/evan	{ username: 'evan' }
/user/:username/post/:post_id	/user/evan/post/123	{ username: 'evan', post_id: '123' }

 

In addition to $route.params, the $route object also exposes other useful information such as $route.query (if there is a query in the URL), $route.hash.etc. You can check out the full details in the API Reference

除了 $route.params, $route 对象还暴露出其他的有用信息，比如 路由？，路由的哈希,等等。你可以查询所有的细节在api参考里。