3種vue路由傳參的基本模式
更新時(shí)間：2018年02月22日 10:01:18 作者：ESnail
這篇文章主要為大家詳細(xì)介紹了vue路由傳參的3種基本模式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
路由是連接各個(gè)頁面的橋梁，而參數(shù)在其中扮演者異常重要的角色，在一定意義上，決定著兩座橋梁是否能夠連接成功。
在vue路由中，支持3中傳參方式。
場景，點(diǎn)擊父組件的li元素跳轉(zhuǎn)到子組件中，并攜帶參數(shù)，便于子組件獲取對應(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}`,
})
// 方案一，需要對應(yīng)路由配置如下：
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
// 很顯然，需要在path中添加/:id來對應(yīng) $router.push 中path攜帶的參數(shù)。
// 在子組件中可以使用來獲取傳遞的參數(shù)值。
$route.params.id
方案二：
// 父組件中：通過路由屬性中的name來確定匹配的路由，通過params來傳遞參數(shù)。
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
// 對應(yīng)路由配置: 注意這里不能使用:/id來傳遞參數(shù)了，因?yàn)楦附M件中，已經(jīng)使用params來攜帶參數(shù)了。
{
path: '/describe',
name: 'Describe',
component: Describe
}
//子組件中: 這樣來獲取參數(shù)
$route.params.id
方案三：
// 父組件：使用path來匹配路由，然后通過query來傳遞參數(shù)
這種情況下 query傳遞的參數(shù)會顯示在url后面?id=？
this.$router.push({
path: '/describe',
query: {
id: id
}
})
// 對應(yīng)路由配置：
{
path: '/describe',
name: 'Describe',
component: Describe
}
// 對應(yīng)子組件: 這樣來獲取參數(shù)
$route.query.id
// 這里要特別注意 在子組件中 獲取參數(shù)的時(shí)候是$route.params 而不是
$router 這很重要~~~
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vxe-table是一個(gè)全功能的Vue表格,滿足絕大部分對Table的一切需求,與任意組件庫完美兼容,下面這篇文章主要給大家介紹了關(guān)于Vxe-Table開發(fā)中各種坑以及避坑的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue多次打包后出現(xiàn)瀏覽器緩存的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
BEM是一種前端命名方法論,主要是針對CSS,意思是塊（Block）、元素（Element）、修飾符（Modifier）的簡寫,這種命名方法讓CSS便于統(tǒng)一團(tuán)隊(duì)開發(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ài)添加的屬性還可以監(jiān)聽屬性的刪除操作，以及數(shù)組的索引以及l(fā)ength屬性的修改操作。另外Vue3的響應(yīng)式系統(tǒng)還可以作為模塊單獨(dú)使用。下面更多介紹，需要的小伙伴可以才可以參考一下2022-02-02
這篇文章主要介紹了vue路由跳轉(zhuǎn)了但界面不顯示的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vuex是一個(gè)專門為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理庫。它采用了一個(gè)集中式的架構(gòu)，將應(yīng)用程序的所有組件的狀態(tài)存儲在一個(gè)單獨(dú)的地方。這使得狀態(tài)的管理和維護(hù)變得更加容易2023-03-03
Vue的插值表達(dá)式是一種特殊的語法,用于在模板中動態(tài)地將數(shù)據(jù)綁定到視圖中,一般使用雙大括號 ("{{ }}")將表達(dá)式包裹起來,下面我們就來根據(jù)三個(gè)案例來深入了解下插值表達(dá)式的使用吧2023-11-11
Vue路由傳遞參數(shù)與重定向的使用方法總結(jié)
路由的本質(zhì)就是一種對應(yīng)關(guān)系,比如說我們在url地址中輸入我們要訪問的url地址之后,瀏覽器要去請求這個(gè)url地址對應(yīng)的資源,下面這篇文章主要給大家介紹了關(guān)于Vue路由傳遞參數(shù)與重定向的使用方法,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue3.0 CLI - 3.2 - 路由的初級使用教程,非常不錯，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
vue3.0 vue-router4.0打包后頁面空白的解決方法
本文主要介紹了vue3.0 vue-router4.0打包后頁面空白的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02