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