路由传参方式
- this.$router.push({path:’/about’,query:{id:1}}); –类似于get请求,地址栏显示参数
- this.$router.push({name:’about’,query:{id:1}); –类似于get请求,地址栏显示参数
- this.$router.push({name:’about’,params:{id:1}}); –推荐使用,类似于post请求,地址栏不显示参数,没有参数大小限制
查询方式
- 使用path时,query参数值能正常获取,在地址栏展示参数,类似于get,params参数不能正常获取,值为空.
- 使用name时,query参数值能正常获取,在地址栏展示参数,类似于get,params参数值能正常获取,地址栏不展示参数,类似于post.
参数获取
- this.$route.query
- this.$route.params
params方式参数丢失问题解决方案
- params方式进行路由跳转后进行页面刷新后参数会丢失,可在路由地址后面设置参数规则
如:
1 2 3 4 5 6
{ path: "roleManage/:id", name: "roleManage", meta: { title: "角色信息维护" }, component: () => import("@/views/system/role/roleManage.vue") } - 通过localStorage进行处理