vue路由跳转传递参数的方式总结

时间:2021-05-26

日常业务中,路由跳转的同时传递参数是比较常见的,传参的方式有三种:

1)通过动态路由方式

//路由配置文件中 配置动态路由{ path: '/detail/:id', name: 'Detail', component: Detail }//跳转时页面var id = 1;this.$router.push('/detail/' + id) //跳转后页面获取参数this.$route.params.id

2)通过query属性传值

//路由配置文件中{ path: '/detail', name: 'Detail', component: Detail }//跳转时页面this.$router.push({ path: '/detail', query: { name: '张三', id: 1, }}) //跳转后页面获取参数对象this.$route.query

3)通过params属性传值

//路由配置文件中{ path: '/detail', name: 'Detail', component: Detail }//跳转时页面this.$router.push({ name: 'Detail', params: { name: '张三', id: 1, }}) //跳转后页面获取参数对象this.$route.params

总结:

1.动态路由和query属性传值 页面刷新参数不会丢失, params会丢失

2.动态路由一般用来传一个参数时居多(如详情页的id), query、params可以传递一个也可以传递多个参数 。

补充方法:

页面刷新数据不会丢失

methods:{ insurance(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/particulars/${id}`, })}

需要对应路由配置如下:

this.$route.params.id

到此这篇关于vue路由跳转传递参数的方式总结的文章就介绍到这了,更多相关vue路由跳转传递参数的三种方式内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章