使用vue-router携带不同参数多次push到一个页面时请求 不重新触发问题 ,只有第一次触发

1. vue跳转 

this.$router.push({
   path: '/user/userDetils',
   query: {
      id: JSON.stringify(val.id),
      name: JSON.stringify(this.searchData.name),
      status: val.status
   }
});

2. 配置路由

var subRouter = function (Main) {
	return [
		{
			path: '/user',
			name: 'user.html#',
			component: Main,
			children: [
				{
					path: 'userDetils',
					name: 'userDetils',
					component: () => import('submodule/user/view/userdetails')
				}
			]
		}];
};
export default subRouter;

3. 在userdetails.vue 页面

mounted() {
		//status:0新增，1编辑
		let id = this.$route.query.id;
		let name = this.$route.query.name;
		let status = this.$route.query.status;
		if(type == 0){
			this.getFormTitleList();;
		}else if(type == 1){
			this.getFormTitleList2();
		}
}

 写在 mounted 里： 因为mounted函数只会在html和模板渲染之后会加载一次，但是在子组件中只有第一次的数据显示是正常的

多次跳转就不会执行了

修改为 写在watch 里面 就可以解决了：

watch: {
		'$route': {
			immediate: true,
			handler: function(to, from) {
				//拿到目标参数 to.query.id 去再次请求数据接口
				console.log('监测参数type：' + to.query.id);
				console.log('监测参数deviceType： ' + to.query.name);
				this.init(to.query.id, to.query.name);
			}
		}
	},

watch 的一个特点是，最初绑定的时候是不会执行的，要等到 监听的属性 改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办呢？

immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。

官方也有说明：https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

 

正在学习vue， 不足之处多多指教！