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参考里。

巴特西

Dynamic Route Matching Vue路由(1)

Dynamic Route Matching

最新文章

热门文章