页面效果
从产品成本核算配置管理Tab页跳转核算配置信息Tab页
路由跳转新页面,需要考虑到:
- 路由跳转配置
//在router配置跳转信息
{
path: '/costcheckconf',
component: Layout,
redirect: '/costcheckconf/msg',
children: [{
path: 'msg',
name: '核算配置信息',
component: () =>
import(/* webpackChunkName: "page" */ '@/views/workshop/costcheckconf/costcheckconf-form')
}]
},
- 路由跳转如何传递参数问题
解决方案:使用query传值
queryHandle (id) {
//路由跳转页面并传递参数
this.$router.push({
path:'/costcheckconf/msg',
query:{
id:id
}
})
}
- 打开多个Tab页面,页面变量加载不自动刷新的问题
问题原因 : vue官网详细解释说明使用同一路由携带不同参数,本质上是重用相同的组件实例,默认在跳转路由时会采用缓存策略,并不会刷新当前路由组件,因此不会调用组件的生命周期挂钩。
使用的解决方案:监听路由的变化
watch: {
'$route'(to, from){
//接收参数
this.route_Id = to.query.id;
this.init(this.route_Id);
}
}