vue-router传值的三种方式

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传参，不用拼接路由那样写，刷新参数不会丢失，不会报错。