若依分离版(3.7.0),子组件根据不同需要修改父组件app-main的背景颜色。
默认颜色是透明,ABC三个页面,AC用默认,B需要更改为EAEEF4。方法如下:
1.src/store/modules/user.js增加如下代码:

....
const user = {
  state: {
    ....
    appMainBg: 'transparent'
  },

  mutations: {
    ....
    SET_APP_MAIN_BG: (state, appMainBg) => {
      state.appMainBg = appMainBg
    },
  },

2.src/permission.js,路由跳转就重置状态appMainBg值为默认

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (getToken()) {
    store.commit('SET_APP_MAIN_BG', 'transparent');
    ....

3.src/layout/components/AppMain.vue

<template>
  <section class="app-main" :style="'background-color: '+appMainBg+';'">
    ....
  </section>
</template>

<script>
export default {
  computed: {
    // 增加如下代码
    appMainBg() {
      console.log(this.$store.getters.appMainBg);
      return this.$store.state.user.appMainBg
    },
    ....
  }
}
</script>

4.目标页面B。

export default {
    ....
  created() {
     this.$store.commit('SET_APP_MAIN_BG', '#EAEEF4');
  },

请鹅出战
328 声望3 粉丝

当我带上墨镜,也许我就真的瞎了。