vue路由傳參及獲取參數(shù)的方式總結(jié)
vue路由傳參及獲取參數(shù)方式
方法一
動(dòng)態(tài)路由（這里用來測試，傳了兩個(gè)參數(shù)username和post_id）
//路由配置
{
? ?? ?path: '/user/:username/:post_id',
? ??? ?name: 'User',
? ??? ?component: User
?}//跳轉(zhuǎn)
?? ?this.$router.push({
? ? ??? ? path: `/user/${username}/${post_id}`,
? ? })匹配路徑：/user/evan/123
傳遞的參數(shù)：{ username: 'evan', post_id: '123' }
//獲取參數(shù) this.$route.params.username this.$route.params.post_id
方法二
通過路由屬性中的name來確定匹配的路由，通過params來傳遞參數(shù)。
//路由配置
{
? ?? ?path: '/user',
? ??? ?name: 'User',
? ??? ?component: User
?}//js跳轉(zhuǎn)
?? ?this.$router.push({
? ? ??? ? name: 'User',
? ? ??? ? params: {
? ? ? ? ? ? id: id
? ? ? ? ? }
? ? })<!--html跳轉(zhuǎn)-->
<router-link :to="{name:'User',params:{id:3}}"><span>跳轉(zhuǎn)</span></router-link>js獲取參數(shù)：this.$route.params.id
html獲取參數(shù)： {{$route.params.id}}
方法三
使用path來匹配路由，然后通過query來傳遞參數(shù)，參數(shù)顯示在地址欄上，并用?號(hào)和&號(hào)拼接的
//路由配置
{
? ?? ?path: '/user',
? ??? ?name: 'User',
? ??? ?component: User
?}//js跳轉(zhuǎn)
?? ?this.$router.push({
? ? ??? ? ?path: '/user',
? ? ? ? ? query: {
? ? ? ? ? ? id: id
? ? ? ? ? }
? ? })<!--html跳轉(zhuǎn)--> <router-link to="/user?id=1"><span>跳轉(zhuǎn)</span></router-link>
js獲取參數(shù)：this.$route.query.id
html獲取參數(shù)： {{$route.query.id}}
- 參數(shù)是對(duì)象的時(shí)候使用params傳參
- 參數(shù)是字符串拼接的時(shí)候使用query傳參
vue路由傳遞參數(shù)，刷新頁面后參數(shù)丟失
在用vue做項(xiàng)目的時(shí)候，發(fā)現(xiàn)在新頁面刷新后，上一頁面帶過來的參數(shù)會(huì)丟失，查閱資料才發(fā)現(xiàn)原來自己對(duì)params和query理解不透徹
下面是兩種傳參方法：
1.用 params 傳參
需要路由里加上這個(gè)參數(shù)
this.$router.push({name:'list', params:{id: id}});
routes: [
? ? {
? ? ? path: '/list/:id',
? ? ? name: 'list'
? ? }
? ]可以通過 this.$route.params.id 來獲取
2.可以將參數(shù)寫到路徑里
this.$router.push({path: '/folder/file', query: {id: list.id, name: list.name}})可以通過 this.$route.query.id 來獲取
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue中,渲染函數(shù)是一種用于動(dòng)態(tài)生成組件的函數(shù),可以將組件的模板代碼編寫為JavaScript代碼,并在運(yùn)行時(shí)進(jìn)行渲染,下面我們就來看看它的具體用法吧2023-08-08
vue原理Compile之optimize標(biāo)記靜態(tài)節(jié)點(diǎn)源碼示例
這篇文章主要為大家介紹了vue原理Compile之optimize標(biāo)記靜態(tài)節(jié)點(diǎn)源碼示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue?項(xiàng)目運(yùn)行完成后自動(dòng)打開瀏覽器的方法匯總
這篇文章主要介紹了Vue?項(xiàng)目運(yùn)行完成后自動(dòng)打開瀏覽器的多種實(shí)現(xiàn)方法，方法一比較適用于vue3，每種方法通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-02-02
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)小購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
vue實(shí)現(xiàn)Input輸入框模糊查詢方法
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)Input輸入框模糊查詢方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
使用elementUI表單校驗(yàn)函數(shù)validate需要注意的坑及解決
這篇文章主要介紹了使用elementUI表單校驗(yàn)函數(shù)validate需要注意的坑及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
本篇文章主要介紹了Vue 父子組件、組件間通信示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
Spring boot 和Vue開發(fā)中CORS跨域問題解決
這篇文章主要介紹了Spring boot 和Vue開發(fā)中CORS跨域問題解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
在vue-cli搭建的項(xiàng)目中增加后臺(tái)mock接口的方法
這篇文章主要介紹了在vue-cli搭建的項(xiàng)目中增加后臺(tái)mock接口的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
9102年webpack4搭建vue項(xiàng)目的方法步驟
這篇文章主要介紹了9102年webpack4搭建vue項(xiàng)目的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02