使用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 }
)
```