提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
this.$router.push进行页面跳转时。携带参数有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
′
)
，
传
递
的
参
数
会
拼
接
在
跳
转
地
址
的
后
面
。
使
用
t
h
i
s
.
router.push({path: 'testQuery',query: {testQuery:'testQuery'}})，传递的参数会拼接在跳转地址的后面。使用this.
router.push(path:′testQuery′,query:testQuery:′testQuery′)，传递的参数会拼接在跳转地址的后面。使用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
′
)
，
传
递
的
参
数
不
会
拼
接
在
跳
转
的
后
面
。
使
用
t
h
i
s
.
router.push({name: 'testParams',params: {testParams:'testParams'}})，传递的参数不会拼接在跳转的后面。使用this.
router.push(name:′testParams′,params:testParams:′testParams′)，传递的参数不会拼接在跳转的后面。使用this.route.query.key取值
二、实现代码
1.index.js代码
const router =newRouter({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>exportdefault{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>exportdefault{name:"TestParams",data(){return{testParams:''}},mounted(){this.testParams =this.$route.params.testParams;}}</script>
4.testParams代码
<template><div id="testQuery">{{testQuery}}</div></template><script>exportdefault{name:"TestQuery",data(){return{testQuery:''}},mounted(){this.testQuery =this.$route.query.testQuery;}}</script>
5.效果
总结
两种方式非常相似，区别在于两点：
1、是否在地址后面拼接参数。
2、因为动态路由也是传递params的，所以在 this.$router.push() 方法中 path是不能和params一起使用的，否则params将无效。需要用name来指定页面，一定要记得，在index.js中设置好那么属性。
本文转载自: https://blog.csdn.net/qq_39176307/article/details/124622631
版权归原作者 如人饮氺 所有， 如有侵权，请联系我们删除。
版权归原作者 如人饮氺 所有， 如有侵权，请联系我们删除。