Vue中路由傳參的實用方式?分享
1. 方式一：使用router-link標簽
1.1 params 傳參
首先定義好路由
const routes = [
{ path : ‘/home' , component : () => import(‘/../views/home.vue') } ,
{ path : ‘/about/:id' , name : 'about' , component: () => import(‘/../views/about.vue') }
]在需要跳轉的home組件中使用 router-link 標簽
<router-link :to=”{ name : 'about' , params : { id : 1} }”>跳轉</router-link>在跳轉到的about組件中拿到傳過來的值
this.$route.params.id
小結：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') }
]在需要跳轉的home組件中使用 router-link 標簽
<router-link :to=”{ name : 'about' , query: { id : 1} }”>跳轉</router-link>在跳轉到的about組件中拿到傳過來的值
this.$route.query.id
小結：query傳參類似于get，在url末尾會顯示傳過來的參數(shù)，路由地址可不配置。
注意：如果是html取參，用$route.query.id；如果是script取參，用this.$route.query.id。
總結：如果使用params傳參，要在path中配置好路由地址，不然頁面刷新后傳過來的參數(shù)會丟失；如果使用query傳參，則無需再path中配置路由地址，頁面跳轉后刷新也不會丟失參數(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') }
]在需要跳轉的home組件中添加一個button按鈕，并增加點擊事件
<button @click=”change”>跳轉</button>
在change方法中使用this.$router.push進行頁面跳轉
change(){
this.$router.push({
name : “about” ,
params : {id : 1}
})
}在about組件中拿到傳過來的值
this.$route.params.id
小結：和使用router-link標簽類似，使用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') }
]在需要跳轉的home組件中添加一個button按鈕，并增加點擊事件
<button @click=”change”>跳轉</button>
在change方法中使用this.$router.push進行頁面跳轉
change(){
this.$router.push({
name : “about” ,
query: {id : 1}
})
}或者：
change(){
this.$router.push({
path: “/about” ,
query: {id : 1}
})
}在about組件中拿到傳過來的值
this.$route.query.id
小結：和使用router-link標簽類似，使用query就類似于get方法，不需要配置好路由地址:id，刷新頁面后數(shù)據(jù)也不會丟失。
總結：如果使用params傳參，要在path中配置好路由地址，不然頁面刷新后傳過來的參數(shù)會丟失；如果使用query傳參，則無需再path中配置路由地址，頁面跳轉后刷新也不會丟失參數(shù)。
到此這篇關于Vue中路由傳參的實用方式 分享的文章就介紹到這了,更多相關Vue路由傳參內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue生命周期的探索，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要為大家介紹了vue之mixin的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
vue-router history模式服務器端配置過程記錄
vue路由有hash和history兩種模式,這篇文章主要給大家介紹了關于vue-router history模式服務器端配置的相關資料,需要的朋友可以參考下2021-06-06
如何用vue-cli3腳手架搭建一個基于ts的基礎腳手架的方法
這篇文章主要介紹了如何用vue-cli3腳手架搭建一個基于ts的基礎腳手架的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
這篇文章主要介紹了vue 動態(tài)綁定背景圖片的方法,在文末給大家介紹了vue如何給v-for循環(huán)的標簽添加背景圖片，需要的朋友參考下吧2018-08-08
el-select如何獲取當前選中的對象所有(item)數(shù)據(jù)
在開發(fā)業(yè)務場景中我們通常遇到一些奇怪的需求,下面這篇文章主要給大家介紹了關于el-select如何獲取當前選中的對象所有(item)數(shù)據(jù)的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
前端報錯npm ERR! cb() never called!問題解決辦法
最近接手了一個前臺項目,執(zhí)行npm install的時候一直報錯,所以這里就給大家總結下,這篇文章主要給給大家介紹了關于前端報錯npm?ERR! cb() never called!問題的解決辦法,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了vue cli webpack中使用sass的方法,需要的朋友可以參考下2018-02-02
這篇文章主要為大家詳細介紹了springboot+VUE實現(xiàn)登錄注冊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
Vue項目中使用better-scroll實現(xiàn)一個輪播圖自動播放功能
better-scroll是一個非常非常強大的第三方庫 在移動端利用這個庫 不僅可以實現(xiàn)一個非常類似原生ScrollView的效果 也可以實現(xiàn)一個輪播圖的效果。這篇文章主要介紹了Vue項目中使用better-scroll實現(xiàn)一個輪播圖,需要的朋友可以參考下2018-12-12