vue-router传值的三种方式
- 第一种方式 :path,query组合
this.$router.push({path:'appealCenter/appealDetails', query: {prdId: row.prdId, deal: JSON.stringify(false) }})
appealDetails中接收
this.appealId = this.$route.query.prdId;
this.dealWith = this.$route.query.deal;
- 第二种方式:name,params组合,刷新页面会导致参数丢失。
this.$router.push({name:'appealDetails', params: {prdId: row.prdId, deal: 'a'}})
appealDetails中接收
this.appealId = this.$route.params.prdId;
this.dealWith = this.$route.params.deal;
- 第三种方式:
router.js文件配置
{
path: "userAddEdit/:isAddUser/:poolName/:value",
component: () => import ('@/views/userManage/addEditUser'),
name: "userAddEdit",
authority: "userStock",
}
跳转页面
this.$router.push({ path: `/stock/userAddEdit/${this.isAddUser}/${this.poolName}/${this.poolId}`});
接收
this.isAdd = JSON.parse(this.$route.params.isAddUser);
this.trsValue = this.$route.params.value;
this.poolName = this.$route.params.poolName;
以上就是常用的Vue路由跳转传值的三种方式。
还有一种保证页面刷新,数据不会丢失的方式;即页面跳转后,把数据保存在localStorage或者sessionStorage中,再在页面beforeDestroy的时候销毁掉。
有个需求,要传video的url地址到新的页面进行全屏播放,第三种方法报auth的错误(不知道是不是因为传的是http格式的参数,拼接到路由后报错(我猜的)),刚刚发现第三种方法,跳转的时候还可以像第二种方法那样写,即用params传参,不用拼接路由那样写,刷新参数不会丢失,不会报错。