vue路由跳轉(zhuǎn)傳遞參數(shù)的方式總結(jié)
日常業(yè)務(wù)中，路由跳轉(zhuǎn)的同時(shí)傳遞參數(shù)是比較常見(jiàn)的，傳參的方式有三種：
1）通過(guò)動(dòng)態(tài)路由方式
//路由配置文件中 配置動(dòng)態(tài)路由
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
//跳轉(zhuǎn)時(shí)頁(yè)面
var id = 1;
this.$router.push('/detail/' + id)
//跳轉(zhuǎn)后頁(yè)面獲取參數(shù)
this.$route.params.id
2）通過(guò)query屬性傳值
//路由配置文件中
{
path: '/detail',
name: 'Detail',
component: Detail
}
//跳轉(zhuǎn)時(shí)頁(yè)面
this.$router.push({
path: '/detail',
query: {
name: '張三'，
id: 1,
}
})
//跳轉(zhuǎn)后頁(yè)面獲取參數(shù)對(duì)象
this.$route.query
3）通過(guò)params屬性傳值
//路由配置文件中
{
path: '/detail',
name: 'Detail',
component: Detail
}
//跳轉(zhuǎn)時(shí)頁(yè)面
this.$router.push({
name: 'Detail',
params: {
name: '張三'，
id: 1,
}
})
//跳轉(zhuǎn)后頁(yè)面獲取參數(shù)對(duì)象
this.$route.params
總結(jié)：
1.動(dòng)態(tài)路由和query屬性傳值 頁(yè)面刷新參數(shù)不會(huì)丟失， params會(huì)丟失
2.動(dòng)態(tài)路由一般用來(lái)傳一個(gè)參數(shù)時(shí)居多(如詳情頁(yè)的id), query、params可以傳遞一個(gè)也可以傳遞多個(gè)參數(shù) 。
補(bǔ)充方法：
頁(yè)面刷新數(shù)據(jù)不會(huì)丟失
methods：{
insurance(id) {
//直接調(diào)用$router.push 實(shí)現(xiàn)攜帶參數(shù)的跳轉(zhuǎn)
this.$router.push({
path: `/particulars/${id}`,
})
}
需要對(duì)應(yīng)路由配置如下：
this.$route.params.id
到此這篇關(guān)于vue路由跳轉(zhuǎn)傳遞參數(shù)的方式總結(jié)的文章就介紹到這了,更多相關(guān)vue路由跳轉(zhuǎn)傳遞參數(shù)的三種方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue子組件向父組件傳值方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-03-03
Vue實(shí)現(xiàn)移動(dòng)端日歷的示例代碼
工作中遇到一個(gè)需求是根據(jù)日歷查看某一天/某一周/某一月的睡眠報(bào)告，但是找了好多日歷組件都不是很符合需求，只好自己手寫(xiě)一個(gè)日歷組件，順便記錄一下，希望對(duì)大家有所幫助2023-04-04
前端構(gòu)建工具Webpack、Vite區(qū)別有哪些
Webpack和Vite是兩種主流的前端構(gòu)建工具,它們?cè)诠δ?、性能和使用?chǎng)景上有所不同,Webpack提供豐富的功能和配置,適合大型復(fù)雜項(xiàng)目,但可能導(dǎo)致啟動(dòng)和構(gòu)建速度較慢,Vite基于ES模塊,支持快速的熱替換,適合小型或中等項(xiàng)目,需要的朋友可以參考下2024-10-10
VUE前端從后臺(tái)請(qǐng)求過(guò)來(lái)的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作
VUE前端從后臺(tái)請(qǐng)求過(guò)來(lái)的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue2.0使用swiper組件實(shí)現(xiàn)輪播效果
這篇文章主要為大家詳細(xì)介紹了vue2.0使用swiper組件實(shí)現(xiàn)輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
今天小編就為大家分享一篇vue2過(guò)濾器模糊查詢方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了VUE實(shí)現(xiàn)吸底按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
如何通過(guò)Vue3+Element?Plus自定義彈出框組件
這篇文章主要給大家介紹了關(guān)于如何通過(guò)Vue3+Element?Plus自定義彈出框組件的相關(guān)資料,彈窗是前端開(kāi)發(fā)中的一種常見(jiàn)需求,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了Vuex模塊化用法?跨模塊調(diào)用的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,2023-10-10
利用Vue的v-for和v-bind實(shí)現(xiàn)列表顏色切換
這篇文章主要介紹了利用Vue的v-for和v-bind實(shí)現(xiàn)列表顏色切換，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07