使用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 [
·
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, 不足之处多多指教!
更多推荐
已为社区贡献3条内容
所有评论(0)