快捷導(dǎo)航

vue路由傳參三種基本方式詳解

更新時(shí)間：2019年12月09日 09:04:18 作者：噠噠Da

這篇文章主要介紹了vue路由傳參三種基本方式詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

現(xiàn)有如下場(chǎng)景，點(diǎn)擊父組件的li元素跳轉(zhuǎn)到子組件中，并攜帶參數(shù)，便于子組件獲取數(shù)據(jù)。

父組件中：

<li v-for="article in articles" @click="getDescribe(article.id)">

methods：

方案一：

getDescribe(id) {
//  直接調(diào)用$router.push 實(shí)現(xiàn)攜帶參數(shù)的跳轉(zhuǎn)
    this.$router.push({
     path: `/describe/${id}`,
    })

方案一，需要對(duì)應(yīng)路由配置如下：

{
   path: '/describe/:id',
   name: 'Describe',
   component: Describe
  }

很顯然，需要在path中添加/:id來對(duì)應(yīng) $router.push 中path攜帶的參數(shù)。在子組件中可以使用來獲取傳遞的參數(shù)值。

this.$route.params.id

方案二：

父組件中：通過路由屬性中的name來確定匹配的路由，通過params來傳遞參數(shù)。

this.$router.push({
     name: 'Describe',
     params: {
      id: id
     }
    })

對(duì)應(yīng)路由配置: 這里可以添加:/id 也可以不添加，不添加數(shù)據(jù)會(huì)在url后面顯示，不添加數(shù)據(jù)就不會(huì)顯示

{
   path: '/describe',
   name: 'Describe',
   component: Describe
  }

子組件中: 這樣來獲取參數(shù)

this.$route.params.id

方案三：

父組件：使用path來匹配路由，然后通過query來傳遞參數(shù)

這種情況下 query傳遞的參數(shù)會(huì)顯示在url后面?id=？

this.$router.push({
     path: '/describe',
     query: {
      id: id
     }
    })

對(duì)應(yīng)路由配置：

{
   path: '/describe',
   name: 'Describe',
   component: Describe
  }

對(duì)應(yīng)子組件: 這樣來獲取參數(shù)

this.$route.query.id

注意事項(xiàng)：

1）、這里要特別注意在父組件中跳轉(zhuǎn)到子組件使用

this.$router.push("/Home");//不傳參
this.$router.push({
})；//傳參，參數(shù)以字段的形式加入到對(duì)象大括號(hào){ }中

2）、在子組件中獲取參數(shù)的時(shí)候是

this.$route.params.id

this.$route.query.id

注意是route而不是router

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vite中自制mock服務(wù)器(不使用第三方服務(wù))
本文主要介紹了Vite中自制mock服務(wù)器，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vue中如何引入jest單元測(cè)試
這篇文章主要介紹了vue中如何引入jest單元測(cè)試問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
使用antv替代Echarts實(shí)現(xiàn)數(shù)據(jù)可視化圖表詳解
這篇文章主要為大家介紹了使用antv替代Echarts實(shí)現(xiàn)數(shù)據(jù)可視化圖表詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
vue+elemet實(shí)現(xiàn)表格手動(dòng)合并行列
這篇文章主要為大家詳細(xì)介紹了vue+elemet實(shí)現(xiàn)表格手動(dòng)合并行列，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
vue二選一tab欄切換新做法實(shí)現(xiàn)
這篇文章主要介紹了vue二選一tab欄切換新做法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
利用Dectorator分模塊存儲(chǔ)Vuex狀態(tài)的實(shí)現(xiàn)
這篇文章主要介紹了利用Dectorator分模塊存儲(chǔ)Vuex狀態(tài)的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-02-02
一文帶你搞懂Vue中Provide/Inject的使用與高級(jí)應(yīng)用
這篇文章將詳細(xì)介紹如何在?Vue.js?中使用?provide?和?inject?模式,并探討其在實(shí)際應(yīng)用中的高級(jí)用法,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-11-11
element表格el-table實(shí)現(xiàn)虛擬滾動(dòng)解決卡頓問題
當(dāng)頁面數(shù)據(jù)過多,前端渲染大量的DOM時(shí),會(huì)造成頁面卡死問題,本文主要介紹了element表格el-table實(shí)現(xiàn)虛擬滾動(dòng)解決卡頓問題,具有一定的參考價(jià)值,感興趣的可以了解一下
2023-10-10
vue遞歸獲取父元素的元素實(shí)例
這篇文章主要介紹了vue遞歸獲取父元素的元素實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue 2.0項(xiàng)目中如何引入element-ui詳解
element-ui是一個(gè)比較完善的UI庫,但是使用它需要有一點(diǎn)vue的基礎(chǔ)，下面這篇文章主要給大家介紹了關(guān)于在vue 2.0項(xiàng)目中如何引入element-ui的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-09-09