Vue路由以及路由传参的基本使用

发表于 | 分类于 | 阅读次数：
本文字数： 639 | 阅读时长 ≈ 1 分钟
简单记录Vue路由以及路由传参的基本使用。

通过路由用query形式传参

1
2
3
4
this.$router.push({
      path: "/ShowVideo",
      query: { cam: this.cam, videoName: this.videoList[this.index] },
});

在打开的页面中取数据

1
2
this.cam = this.$route.query.cam;
this.videoName = this.$route.query.videoName;

如不将数据展示在地址栏中，可以使用params进行传参。用法和query类似。但是一刷新数据就不见了，可以再借助vuex，localStorage等进行存储。

1
this.$router.push({name: 'ShowVideo',params:{cam: this.cam}})

如需要在新页面中打开

1
2
3
4
5
let routeUrl = this.$router.resolve({
path: "/ShowVideo",
query: { cam: this.cam, videoName: this.videoList[this.index] },
 });
window.open(routeUrl.href, "_blank");

返回上一页

1
this.$router.go(-1);