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)文章

Vxe-Table開(kāi)發(fā)中的各種坑以及避坑指南
vxe-table是一個(gè)全功能的Vue表格,滿(mǎn)足絕大部分對(duì)Table的一切需求,與任意組件庫(kù)完美兼容,下面這篇文章主要給大家介紹了關(guān)于Vxe-Table開(kāi)發(fā)中各種坑以及避坑的相關(guān)資料,需要的朋友可以參考下
2022-09-09
vue多次打包后出現(xiàn)瀏覽器緩存的問(wèn)題及解決
這篇文章主要介紹了vue多次打包后出現(xiàn)瀏覽器緩存的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue3配置bem樣式架構(gòu)的代碼詳解
BEM是一種前端命名方法論,主要是針對(duì)CSS,意思是塊（Block）、元素（Element）、修飾符（Modifier）的簡(jiǎn)寫(xiě),這種命名方法讓CSS便于統(tǒng)一團(tuán)隊(duì)開(kāi)發(fā)規(guī)范和方便維護(hù),本文給大家介紹了Vue3配置bem樣式架構(gòu),需要的朋友可以參考下
2024-10-10
vue3.0響應(yīng)式函數(shù)原理詳細(xì)
這篇文章主要介紹了vue3.0響應(yīng)式函數(shù)原理，Vue3的響應(yīng)式系統(tǒng)可以監(jiān)聽(tīng)動(dòng)態(tài)添加的屬性還可以監(jiān)聽(tīng)屬性的刪除操作，以及數(shù)組的索引以及l(fā)ength屬性的修改操作。另外Vue3的響應(yīng)式系統(tǒng)還可以作為模塊單獨(dú)使用。下面更多介紹，需要的小伙伴可以才可以參考一下
2022-02-02
vue路由跳轉(zhuǎn)了但界面不顯示的問(wèn)題及解決
這篇文章主要介紹了vue路由跳轉(zhuǎn)了但界面不顯示的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue狀態(tài)管理庫(kù)Vuex的入門(mén)使用教程
Vuex是一個(gè)專(zhuān)門(mén)為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理庫(kù)。它采用了一個(gè)集中式的架構(gòu)，將應(yīng)用程序的所有組件的狀態(tài)存儲(chǔ)在一個(gè)單獨(dú)的地方。這使得狀態(tài)的管理和維護(hù)變得更加容易
2023-03-03
vue中插值表達(dá)式使用的示例詳解
Vue的插值表達(dá)式是一種特殊的語(yǔ)法,用于在模板中動(dòng)態(tài)地將數(shù)據(jù)綁定到視圖中,一般使用雙大括號(hào) ("{{ }}")將表達(dá)式包裹起來(lái),下面我們就來(lái)根據(jù)三個(gè)案例來(lái)深入了解下插值表達(dá)式的使用吧
2023-11-11
Vue路由傳遞參數(shù)與重定向的使用方法總結(jié)
路由的本質(zhì)就是一種對(duì)應(yīng)關(guān)系,比如說(shuō)我們?cè)趗rl地址中輸入我們要訪(fǎng)問(wèn)的url地址之后,瀏覽器要去請(qǐng)求這個(gè)url地址對(duì)應(yīng)的資源,下面這篇文章主要給大家介紹了關(guān)于Vue路由傳遞參數(shù)與重定向的使用方法,需要的朋友可以參考下
2022-10-10
vue3.0 CLI - 3.2 路由的初級(jí)使用教程
這篇文章主要介紹了vue3.0 CLI - 3.2 - 路由的初級(jí)使用教程,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-09-09
vue3.0 vue-router4.0打包后頁(yè)面空白的解決方法
本文主要介紹了vue3.0 vue-router4.0打包后頁(yè)面空白的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02