Vue中路由傳參的實用方式?分享
1. 方式一：使用router-link標(biāo)簽
1.1 params 傳參
首先定義好路由
const routes = [
{ path : ‘/home' , component : () => import(‘/../views/home.vue') } ,
{ path : ‘/about/:id' , name : 'about' , component: () => import(‘/../views/about.vue') }
]在需要跳轉(zhuǎn)的home組件中使用 router-link 標(biāo)簽
<router-link :to=”{ name : 'about' , params : { id : 1} }”>跳轉(zhuǎn)</router-link>在跳轉(zhuǎn)到的about組件中拿到傳過來的值
this.$route.params.id
小結(jié)：params傳參類似post，路由配置可以為 path : '/about/ : id’或 path : '/about : id’。
注意：如果不配置path的路由地址 :id ，那么第一次發(fā)起請求時可以拿到傳過來的值，但是刷新之后id會消失；配置了path后刷新頁面id會保留。
1.2 query傳參
首先定義好路由
const routes = [
{ path : ‘/home' , component : () => import(‘/../views/home.vue') } ,
{ path : ‘/about' , name : 'about' , component: () => import(‘/../views/about.vue') }
]在需要跳轉(zhuǎn)的home組件中使用 router-link 標(biāo)簽
<router-link :to=”{ name : 'about' , query: { id : 1} }”>跳轉(zhuǎn)</router-link>在跳轉(zhuǎn)到的about組件中拿到傳過來的值
this.$route.query.id
小結(jié)：query傳參類似于get，在url末尾會顯示傳過來的參數(shù)，路由地址可不配置。
注意：如果是html取參，用$route.query.id；如果是script取參，用this.$route.query.id。
總結(jié)：如果使用params傳參，要在path中配置好路由地址，不然頁面刷新后傳過來的參數(shù)會丟失；如果使用query傳參，則無需再path中配置路由地址，頁面跳轉(zhuǎn)后刷新也不會丟失參數(shù)。
2. 方式二：使用button按鈕和點擊時間@click
2.1 params 傳參
首先定義好路由
const routes = [
{ path : ‘/home' , component : () => import(‘/../views/home.vue') } ,
{ path : ‘/about/:id' , name : 'about' , component: () => import(‘/../views/about.vue') }
]在需要跳轉(zhuǎn)的home組件中添加一個button按鈕，并增加點擊事件
<button @click=”change”>跳轉(zhuǎn)</button>
在change方法中使用this.$router.push進行頁面跳轉(zhuǎn)
change(){
this.$router.push({
name : “about” ,
params : {id : 1}
})
}在about組件中拿到傳過來的值
this.$route.params.id
小結(jié)：和使用router-link標(biāo)簽類似，使用params就類似于post方法，需要配置好路由地址:id，才不會在刷新頁面后丟失數(shù)據(jù)。
2.2 query傳參
首先定義好路由
const routes = [
{ path : ‘/home' , component : () => import(‘/../views/home.vue') } ,
{ path : ‘/about' , name : 'about' , component: () => import(‘/../views/about.vue') }
]在需要跳轉(zhuǎn)的home組件中添加一個button按鈕，并增加點擊事件
<button @click=”change”>跳轉(zhuǎn)</button>
在change方法中使用this.$router.push進行頁面跳轉(zhuǎn)
change(){
this.$router.push({
name : “about” ,
query: {id : 1}
})
}或者：
change(){
this.$router.push({
path: “/about” ,
query: {id : 1}
})
}在about組件中拿到傳過來的值
this.$route.query.id
小結(jié)：和使用router-link標(biāo)簽類似，使用query就類似于get方法，不需要配置好路由地址:id，刷新頁面后數(shù)據(jù)也不會丟失。
總結(jié)：如果使用params傳參，要在path中配置好路由地址，不然頁面刷新后傳過來的參數(shù)會丟失；如果使用query傳參，則無需再path中配置路由地址，頁面跳轉(zhuǎn)后刷新也不會丟失參數(shù)。
到此這篇關(guān)于Vue中路由傳參的實用方式 分享的文章就介紹到這了,更多相關(guān)Vue路由傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用el-upload組件實現(xiàn)遞歸多文件上傳的全過程
el-upload組件文件上傳都是每個文件請求一次接口,本次實現(xiàn)一次請求上傳多個文件,下面這篇文章主要給大家介紹了關(guān)于使用el-upload組件實現(xiàn)遞歸多文件上傳的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue如何優(yōu)雅的使用全局WebSocket問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue動態(tài)配置模板 ''component is''代碼
這篇文章主要介紹了vue動態(tài)配置模板 'component is'代碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)全選、反選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)上傳圖片添加水印的升級版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要給大家介紹了關(guān)于Vite版本更新檢查實現(xiàn)頁面自動刷新的解決思路,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-02-02
這篇文章主要為大家介紹了LogicFlow內(nèi)置菜單插件實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了Vue.js單向綁定和雙向綁定,結(jié)合實例形式分析了vue.js單向綁定與雙向綁定相關(guān)原理、實現(xiàn)方法及操作技巧,需要的朋友可以參考下2018-08-08
vue將毫秒數(shù)轉(zhuǎn)化為正常日期格式的實例
今天小編就為大家分享一篇vue將毫秒數(shù)轉(zhuǎn)化為正常日期格式的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家介紹了關(guān)于vue點擊單張圖片放大實現(xiàn)的相關(guān)資料,在vue項目中實現(xiàn)點擊圖片放大功能相信對大家來說都不陌生,文中給出了詳細(xì)的js示例代碼,需要的朋友可以參考下2023-07-07