vue ElementUI 路由跳转新页面

vue ElementUI 路由跳转新页面

页面效果

从产品成本核算配置管理Tab页跳转核算配置信息Tab页

路由跳转新页面，需要考虑到：

1. 路由跳转配置

//在router配置跳转信息
{path: '/costcheckconf',component: Layout,redirect: '/costcheckconf/msg',children: [{path: 'msg',name: '核算配置信息',component: () =>import(/* webpackChunkName: "page" */ '@/views/workshop/costcheckconf/costcheckconf-form')}]},

2. 路由跳转如何传递参数问题

解决方案：使用query传值

	 queryHandle (id) {//路由跳转页面并传递参数this.$router.push({path:'/costcheckconf/msg',query:{id:id}})}

3. 打开多个Tab页面，页面变量加载不自动刷新的问题

问题原因 ： vue官网详细解释说明使用同一路由携带不同参数，本质上是重用相同的组件实例，默认在跳转路由时会采用缓存策略,并不会刷新当前路由组件，因此不会调用组件的生命周期挂钩。
使用的解决方案：监听路由的变化

watch: {'$route'(to, from){//接收参数ute_Id = to.query.id;this.ute_Id);}
}