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

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();//重新加载数据
		}
	}
},