vue router打开新页面并传递参数，接收参数

最新推荐文章于 2024-07-09 08:23:32 发布

乡野码夫

最新推荐文章于 2024-07-09 08:23:32 发布

阅读量2.1k

点赞数 1

分类专栏：前端框架

本文链接：https://blog.csdn.net/qq_41353397/article/details/113485865

版权

前端框架专栏收录该内容

17 篇文章 0 订阅

订阅专栏

a页面跳转到 b页面

未跳转的之前页面（a页面）下代码：

const { href } = this.$router.resolve({
	name: 'contentArticle', //需要打开的新页面vue的名字
	query: {
	id: id   //携带的参数，多个使用,隔开
	}
});
window.open(href, "_blank");//跳转

需要跳转到的新页面（b页面）下的代码

data() {
   return {
	id: '',
   };
},
created(){
	this.getParams();
},
methods: {
	getParams () {
		// 取到路由带过来的参数
		var routerParams = this.$route.query.id;
		// 将数据放在当前组件的数据内
		this.id = routerParams;
	 },
}
watch: {
	// 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
	'$route': 'getParams'
}