3種vue路由傳參的基本模式

更新時(shí)間：2018年02月22日 10:01:18 作者：ESnail

這篇文章主要為大家詳細(xì)介紹了vue路由傳參的3種基本模式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

路由是連接各個(gè)頁(yè)面的橋梁，而參數(shù)在其中扮演者異常重要的角色，在一定意義上，決定著兩座橋梁是否能夠連接成功。

在vue路由中，支持3中傳參方式。

場(chǎng)景，點(diǎn)擊父組件的li元素跳轉(zhuǎn)到子組件中，并攜帶參數(shù)，便于子組件獲取對(duì)應(yīng)li的數(shù)據(jù)，顯示相應(yīng)的正確的內(nèi)容。

父組件中：

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

方案一：

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來(lái)對(duì)應(yīng) $router.push 中path攜帶的參數(shù)。

// 在子組件中可以使用來(lái)獲取傳遞的參數(shù)值。
$route.params.id

方案二：

// 父組件中：通過(guò)路由屬性中的name來(lái)確定匹配的路由，通過(guò)params來(lái)傳遞參數(shù)。
    this.$router.push({
     name: 'Describe',
     params: {
      id: id
     }
    })

// 對(duì)應(yīng)路由配置: 注意這里不能使用:/id來(lái)傳遞參數(shù)了，因?yàn)楦附M件中，已經(jīng)使用params來(lái)攜帶參數(shù)了。
  {
   path: '/describe',
   name: 'Describe',
   component: Describe
  }

//子組件中: 這樣來(lái)獲取參數(shù)
$route.params.id

方案三：

// 父組件：使用path來(lái)匹配路由，然后通過(guò)query來(lái)傳遞參數(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)子組件: 這樣來(lái)獲取參數(shù)
$route.query.id

// 這里要特別注意 在子組件中 獲取參數(shù)的時(shí)候是$route.params 而不是
$router 這很重要~~~

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

您可能感興趣的文章:

相關(guān)文章

element-ui中表格設(shè)置正確的排序及設(shè)置默認(rèn)排序
表格中有時(shí)候會(huì)有排序的需求,下面這篇文章主要給大家介紹了關(guān)于element-ui中表格設(shè)置正確的排序及設(shè)置默認(rèn)排序的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-05-05
一文秒懂vue-property-decorator
這篇文章主要介紹了vue-property-decorator的簡(jiǎn)單知識(shí),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-08-08
深入解析Vue的自定義指令
這篇文章主要介紹了深入解析Vue的自定義指令,自定義指令主要是為了重用涉及普通元素的底層 DOM 訪問(wèn)的邏輯,一個(gè)自定義指令由一個(gè)包含類(lèi)似組件生命周期鉤子的對(duì)象來(lái)定義,需要的朋友可以參考下
2023-05-05
vue watch監(jiān)聽(tīng)變量值的實(shí)時(shí)變動(dòng)示例詳解
這篇文章主要介紹了vue 監(jiān)聽(tīng)變量值的實(shí)時(shí)變動(dòng) watch,使用字符串形式的偵聽(tīng)器函數(shù),還有一種是使用函數(shù)形式的偵聽(tīng)器函數(shù),本文通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-08-08
vue各種時(shí)間類(lèi)型轉(zhuǎn)換方法例子
前端前后端接?處理時(shí)經(jīng)常會(huì)遇到需要轉(zhuǎn)換不同時(shí)間格式的情況,下面這篇文章主要給大家介紹了關(guān)于vue各種時(shí)間類(lèi)型轉(zhuǎn)換的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-06-06
vue利用v-for嵌套輸出多層對(duì)象,分別輸出到個(gè)表的方法
今天小編就為大家分享一篇vue利用v-for嵌套輸出多層對(duì)象,分別輸出到個(gè)表的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue中使用?class?類(lèi)樣式的方法詳情
這篇文章主要介的是?Vue中如何使用?class?類(lèi)樣式的方法，在vue中為我們提供了幾種方式來(lái)使用class類(lèi)的樣式，分別是布爾值、表達(dá)式、多類(lèi)封裝、下面來(lái)看看文章的詳細(xì)介紹內(nèi)容吧,需要的朋友可以參考一下
2021-11-11
Vue+webpack實(shí)現(xiàn)懶加載過(guò)程解析
這篇文章主要介紹了Vue+webpack實(shí)現(xiàn)懶加載過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-02-02
使用@tap.stop阻止事件繼續(xù)傳播
這篇文章主要介紹了使用@tap.stop阻止事件繼續(xù)傳播，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
vue跨窗口通信之新窗口調(diào)用父窗口方法實(shí)例
由于開(kāi)發(fā)需要,我需要在登錄成功請(qǐng)求成功后,調(diào)用父窗口的一個(gè)點(diǎn)擊事件方法,這篇文章主要給大家介紹了關(guān)于vue跨窗口通信之新窗口調(diào)用父窗口的相關(guān)資料,需要的朋友可以參考下
2023-01-01