情景:一个后台系统用的是vue-element-admin模板搭建的;遇到一个需求,虽是同一个页面但他是由很多个产品控制的,切换产品的时候要清空上一个产品选择过的参数,初始化页面(假设需要初始化的参数有很多)。
(1)第一个办法是监控产品的变化,变化的时候把相应参数设成初始值,该清掉清掉该置空的置空,但是涉及到的页面有很多,每个页面都需要做如此的处理,那么就想能不能做个统一的处理,每个页面都适用
(2)
vue-element-admin 中大部分页面都是基于这个 layout 创建的,appMain.vue相当于是主体区域,那么我们在这个页面中监控产品的变化,如果变化了就更新当前页面就能达到想要的效果了
看一下上一开始是根据路由的变化进行更新的,那么现在我们可以加一个产品的变化,除此之外扩展一个如果产品变化的时候当前页面处于二级页面那么要跳回他的一级页面,看一下watch里面的写法,同时二级页面的路由上也要做调整例如:
{
path:'child',
name:Child,
component:()=>import('@/views/child)
meta:{father:'Father'}, // 主要是加上这句,注意Father是父级路由页面的name,不是path
hidden:true
}
注意:如果在appMain.vue这个页面监控了产品的变化,如果你不在这个页面处理二级页面到一级页面的跳转的话,假如你去各自单独的二级页面去监听产品的变化然后跳转跳转到各自的父级页面的话,是不可行的 在appMain.vue这个页面监听到产品变化会先进行更新,而不会走自己页面监听跳转的逻辑了,所以统一都在appMain.vue这个页面处理监听和跳转。