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