this.$router.push攜帶參數(shù)跳轉頁面的實現(xiàn)代碼
前言
this.$router.push進行頁面跳轉時。攜帶參數(shù)有params和query兩種方式。
一、params和query使用方式
query方式：
this. r o u t e r . p u s h ( p a t h : ′ t e s t Q u e r y ′ , q u e r y : t e s t Q u e r y : ′ t e s t Q u e r y ′ ) ， 傳 遞 的 參 數(shù) 會 拼 接 在 跳 轉 地 址 的 后 面 。 使 用 t h i s . router.push({path: 'testQuery',query: {testQuery:'testQuery'}})，傳遞的參數(shù)會拼接在跳轉地址的后面。使用this. router.push(path:′testQuery′,query:testQuery:′testQuery′)，傳遞的參數(shù)會拼接在跳轉地址的后面。使用this.route.params.key取值
params方式：
this. r o u t e r . p u s h ( n a m e : ′ t e s t P a r a m s ′ , p a r a m s : t e s t P a r a m s : ′ t e s t P a r a m s ′ ) ， 傳 遞 的 參 數(shù) 不 會 拼 接 在 跳 轉 的 后 面 。 使 用 t h i s . router.push({name: 'testParams',params: {testParams:'testParams'}})，傳遞的參數(shù)不會拼接在跳轉的后面。使用this. router.push(name:′testParams′,params:testParams:′testParams′)，傳遞的參數(shù)不會拼接在跳轉的后面。使用this.route.query.key取值
二、實現(xiàn)代碼
1.index.js代碼
const router = new Router({
routes: [
{
path:'/test',
component: test,
},
{
name: 'testParams',
path:'/testParams',
component: TestParams,
},
{
path:'/testQuery',
component: TestQuery,
}
]
})2.test.vue代碼
<template>
<div class="test">
<button v-on:click="testParams">params</button>
<button v-on:click="testQuery">query</button>
</div>
</template>
<script>
export default {
name: "test",
data(){
return {
}
},
methods:{
testParams(){
this.$router.push({name: 'testParams',params: {testParams:'testParams'}});
},
testQuery(){
this.$router.push({path: 'testQuery',query: {testQuery:'testQuery'}});
}
}
}
</script>3.testParams代碼
<template>
<div id="testParams">
{{testParams}}
</div>
</template>
<script>
export default {
name: "TestParams",
data() {
return{
testParams: ''
}
},mounted() {
this.testParams = this.$route.params.testParams;
}
}
</script>4.testParams代碼
<template>
<div id="testQuery">
{{testQuery}}
</div>
</template>
<script>
export default {
name: "TestQuery",
data(){
return{
testQuery: ''
}
},mounted() {
this.testQuery = this.$route.query.testQuery;
}
}
</script>5.效果
總結
兩種方式非常相似，區(qū)別在于兩點：
1、是否在地址后面拼接參數(shù)。
2、因為動態(tài)路由也是傳遞params的，所以在 this.$router.push() 方法中 path是不能和params一起使用的，否則params將無效。需要用name來指定頁面，一定要記得，在index.js中設置好那么屬性。
到此這篇關于this.$router.push攜帶參數(shù)跳轉頁面的文章就介紹到這了,更多相關this.$router.push跳轉頁面內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue3 elementPlus部分組件樣式修改的方法,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-01-01
websocket通信是很好玩的,也很有用的的通信方式,下面這篇文章主要給大家介紹了關于Vue中前后端使用WebSocket的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
最近在vue.js項目發(fā)布后發(fā)現(xiàn)了一個關于路徑的問題，發(fā)現(xiàn)網(wǎng)上關于這個的資料較少，所以給大家總結下，下面這篇文章主要給大家介紹了如何解決關于vue.js發(fā)布后路徑引用的問題，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
VUE使用router.push實現(xiàn)頁面跳轉和傳參方式
這篇文章主要介紹了VUE使用router.push實現(xiàn)頁面跳轉和傳參方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要為大家詳細介紹了Vue全局事件總線，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
解決vuejs 使用value in list 循環(huán)遍歷數(shù)組出現(xiàn)警告的問題
今天小編就為大家分享一篇解決vuejs 使用value in list 循環(huán)遍歷數(shù)組出現(xiàn)警告的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue 的 solt 子組件過濾過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
詳解Vue.js使用Swiper.js在iOS<11時出現(xiàn)錯誤
這篇文章主要介紹了詳解Vue.js使用Swiper.js在iOS<11時出現(xiàn)錯誤，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue實現(xiàn)一個矩形標記區(qū)域(rectangle marker)的方法
這篇文章主要介紹了vue實現(xiàn)一個矩形標記區(qū)域 rectangle marker的方法，幫助大家實現(xiàn)區(qū)域標記功能，感興趣的朋友可以了解下2020-10-10
Vue源碼解析之數(shù)據(jù)響應系統(tǒng)的使用
這篇文章主要介紹了Vue源碼解析之數(shù)據(jù)響應系統(tǒng)的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04