溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了vue路由傳參三種基本方式詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
現有如下場景，點擊父組件的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 也可以不添加，不添加數據會在url后面顯示，不添加數據就不會顯示
{
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
注意事項：
1）、這里要特別注意在父組件中跳轉到子組件使用
this.$router.push("/Home");//不傳參
this.$router.push({
})；//傳參，參數以字段的形式加入到對象大括號{ }中
2）、在子組件中獲取參數的時候是
this.$route.params.id
this.$route.query.id
注意是route而不是router
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
