vueRouter携带参数跳转新页面

1,002 阅读1分钟

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

vue路由跳转

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

配置路由

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;

在一个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。

官网给的文档:- 选项:immediate

在选项参数中指定 `immediate: true` 将立即以表达式的当前值触发回调:

```
vm.$watch('a', callback, {
  immediate: true
})
// 立即以 `a` 的当前值触发回调
```

注意在带有 `immediate` 选项时,你不能在第一次回调时取消侦听给定的 property。

```
// 这会导致报错
var unwatch = vm.$watch(
  'value',
  function () {
    doSomething()
    unwatch()
  },
  { immediate: true }
)
```

如果你仍然希望在回调内部调用一个取消侦听的函数,你应该先检查其函数的可用性:

```
var unwatch = vm.$watch(
  'value',
  function () {
    doSomething()
    if (unwatch) {
      unwatch()
    }
  },
  { immediate: true }
)
```