vue单页应用下使用路由vue-router在新窗口打开页面(带参数)

最新推荐文章于 2023-04-27 18:48:04 发布

hst❀

最新推荐文章于 2023-04-27 18:48:04 发布

阅读量552

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/HuangsTing/article/details/107764314

版权

vue 专栏收录该内容

30 篇文章 3 订阅

订阅专栏

1.router.js

export default new Router({
    routes: [
		{
	        path: '/statistic',
	        name: '/statistic',
	        component: Statistic,
	        title: 'statistic',
	        hidden: true
	    }
	]

2.使用 $router.resolve带参数在新窗口打开

<a href="javascript:void(0)" @click="openStatistic()">点击</a>

openStatistic(){
	const params = { id: val };
	let routeData = this.$router.resolve({
	    path: `/statistic`,
	    query: params,  //参数
	});
	window.open(routeData.href, "_blank");
}

3.新窗口的接收参数方法

created() {
	if (this.$route.query) {
        console.log(this.$route.query)
        this.active = this.$route.query.id;
		this.init();//加载数据
    }
},
watch: {
	$route(to, from) {
		//监听路由是否变化
		if (to.query.id != from.query.id) {
			this.active = to.query.id;
			this.init();//重新加载数据
		}
	}
},