vue3+setup中监听路由变化改变样式

好久之前写的博客，（应该是大二上学期的样子）放在草稿箱里忘记了，既然写了就发出来吧

由于项目中数据大屏页面的背景颜色不同于其他页面，而面包屑导航直接设置在根页面中，底板也直接设置在根页面中，所以今天还学习了vue3+setup中如何监听路由变化来改变根页面的背景颜色样式。

已经成功实现，这里写个博客记录一下。

在Vue 3中，有一个非常方便的API可以观察响应式数据的变化，即watchEffect。watchEffect是一个新的API，可以自动跟踪响应式数据的变化，并在其发生变化时执行回调函数。这意味着您不需要手动指定依赖项，watchEffect可以根据您的代码自动推断依赖项。

在本例中，我们将使用watchEffect和useRoute来观察路由的变化，并更新页面的样式。下面是代码实现：

<template>
  <div class="container">
    <headerVue style="z-index: 2"></headerVue>
    <div class="aside">
      <menuVue style="z-index: 3"></menuVue>
      <div class="box" :style="style">
        <!-- 面包屑导航 -->
        <BreadCrumb />
        <router-view class="subPage" style="z-index: 1"></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import headerVue from "../components/header.vue";
import menuVue from "../components/menu.vue";
import "../style/base.scss";
import "../style/subPage.scss";

import { useRoute } from 'vue'
import { reactive, watchEffect } from 'vue'

const style = reactive({
  background: '#eff1f7'
})

const route = useRoute()

watchEffect(() => {
  if (route.path === '/dataScreen') {
    style.background = '#eff1f7'
  } else {
    style.background = '#ffffff'
  }
})

</script>

<style lang="scss" scoped>
.box {
  position: relative;
  padding: 30px;
  height: 900px;
  // background-color: #eff1f7;
}
.container {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.aside {
  display: flex;
  flex-direction: row;
}
.subPage {
  width: 100%;
  height: 100%;
}
</style>

在这个例子中，我们定义了一个响应式的style对象，并使用useRoute来获取当前的路由信息。然后，我们使用watchEffect来观察route.path的变化，并在回调函数中更新style对象。如果当前路由为'/dataScreen'，则我们将样式更改为蓝灰色（#eff1f7）背景，否则为白色背景。

总之，使用watchEffect可以非常方便地观察响应式数据的变化，并执行相关的操作。如果您需要在Vue 3中观察数据的变化，不妨尝试使用watchEffect。