this.$router.push携带参数跳转页面的实现代码

前言

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 = new Router({ routes: [ { path:'/test', component: test, }, { name: 'testParams', path:'/testParams', component: TestParams, }, { path:'/testQuery', component: TestQuery, } ] })

2.test.vue代码

3.testParams代码

4.testParams代码

5.效果

总结

两种方式非常相似，区别在于两点：
1、是否在地址后面拼接参数。
2、因为动态路由也是传递params的，所以在 this.$router.push() 方法中 path是不能和params一起使用的，否则params将无效。需要用name来指定页面，一定要记得，在index.js中设置好那么属性。

到此这篇关于this.$router.push携带参数跳转页面的文章就介绍到这了,更多相关this.$router.push跳转页面内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站！