vue路由傳參方式
阿新 • • 發佈:2018-12-01
現有如下場景,點選父元件的li元素跳轉到子元件中,並攜帶引數,便於子元件獲取資料。
父元件中:
<li v-for="article in articles" @click="getDescribe(article.id)">
methods:
方案一:
getDescribe(id) {
// 直接呼叫$router.push 實現攜帶引數的跳轉
this.$router.push({
path: `/describe/${id}`,
})
方案一,需要對應路由配置如下:
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
很顯然,需要在path中新增/:id來對應 $router.push 中path攜帶的引數。在子元件中可以使用來獲取傳遞的引數值。
this.$route.params.id
方案二:
父元件中:通過路由屬性中的name來確定匹配的路由,通過params來傳遞引數。
this.$router.push({ name: 'Describe', params: { id: id } })
對應路由配置: 注意這裡不能使用:/id來傳遞引數了,因為父元件中,已經使用params來攜帶引數了。
{
path: '/describe',
name: 'Describe',
component: Describe
}
子元件中: 這樣來獲取引數
this.$route.params.id
方案三:
父元件:使用path來匹配路由,然後通過query來傳遞引數
這種情況下 query傳遞的引數會顯示在url後面?id=?
this.$router.push({ path: '/describe', query: { id: id } })
對應路由配置:
{
path: '/describe',
name: 'Describe',
component: Describe
}
對應子元件: 這樣來獲取引數
this.$route.query.id
這裡要特別注意 在子元件中 獲取引數的時候是$route.params 而不是
$router 這很重要