解决vue多个路由共用一个页面,路由传参不同,页面显示数据不同,重新加载数据
解决vue多个路由共用一个页面,路由传参不同,页面显示数据不同,重新加载数据配置 unitType判断路由路由配置 router/index.js:children: [{path: 'pilotUnit',name: 'pilotUnit',component: _import('pilotUnit/index'),...
·
解决vue多个路由共用一个页面,路由传参不同,页面显示数据不同,重新加载数据
配置 unitType
判断路由
路由配置 router/index.js:
children: [
{
path: 'pilotUnit',
name: 'pilotUnit',
component: _import('pilotUnit/index'),
meta: {
title: 'pilotUnit',
unitType: 3
}
},
{
path: 'chiefUnit',
name: 'chiefUnit',
component: _import('pilotUnit/index'),
meta: {
title: 'chiefUnit',
unitType: 2
}
},
{
path: 'examinationUnit',
name: 'examinationUnit',
component: _import('pilotUnit/index'),
meta: {
title: 'examinationUnit',
unitType: 1
}
}
]
公共页面 pilotUnit/index:
data () {
return {
unitType: 1
}
},
mounted () {
// 渲染后 获取 unitType,页面刷新后也能重新获取
this.unitType = this.$route.meta.unitType
},
watch: {
'$route' () {
// 监听路由变化,获取unitType
this.unitType = this.$route.meta.unitType
},
'unitType' () {
// 监听 unitType,调用接口,获取数据
this.$store.dispatch('pilotUnit/handleUnitType', this.unitType)
this.$store.dispatch('pilotUnit/getTableList', {pageSize: 10, currentPage: 1, type: this.unitType})
}
}
更多推荐
已为社区贡献6条内容
所有评论(0)