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, 不足之处多多指教!

Logo

前往低代码交流专区

更多推荐