根据不同的路由渲染出路由所带的颜色

需要渲染的div

<template>
  <div class="navbar" :style="navbarStyle">
    内容
  </div>
</template>

方法

<script>

export default {
  data() {
    return {
      navbarStyle: {}
    }
  },
  watch: {
    $route(route) {
      this.updateNavbarStyle(route)
    }
  },
  created() {
    //首次不会触发监听属性，需要在生命周期完成
    this.updateNavbarStyle(this.$route)
  },

  methods: {
    updateNavbarStyle(route) {
    //全局定义的this.$setttings.navbarPathBackground 
    this.$setttings.navbarPathBackground = [
        { path: '/xxxx/xw', background: '#304156' },
        { path: '/xxxx/xe', background: '#304156' }
    ],
    //把 this.$setttings.navbarPathBackground 换成自己的数组即可
      const pathdata = Array.isArray(this.$setttings?.navbarPathBackground) ? this.$setttings.navbarPathBackground : []
      const matchedPath = pathdata.find(item => item.path === route.fullPath)
      this.navbarStyle = {
        background: matchedPath ? matchedPath.background : '#fff'
      }
    }
  }
}
</script>