如何在使用 Vue 路由时轻松切换主体样式？

vue.js

2024-03-23 00:26:19

使用 Vue 路由轻松切换主体样式

问题：难以动态更新页面样式

使用 Vue 路由管理多页应用程序时，一个常见问题是页面之间的切换不会更改主体样式。这会给用户带来不一致的体验，并阻碍有效导航。

解决方案：CSS 变量和路由守卫

要解决此问题，我们可以使用 CSS 变量和路由守卫。CSS 变量允许我们在样式表中存储和动态更新值，而路由守卫则允许我们监听路由更改并根据需要进行修改。

步骤：

1. 在路由组件中定义 CSS 变量：
为每个页面定义一个 CSS 变量，用于存储主体样式值，例如：

/* HomeView.vue */
:root {
  --body-color: red;
}

/* IntroView.vue */
:root {
  --body-color: pink;
}

2. 在 <body> 中应用 CSS 变量：
在 <body> 标签中使用 style 属性将 CSS 变量应用于主体元素：

<body style="background: var(--body-color);">

3. 在路由守卫中更新 CSS 变量：
在路由守卫中，当页面切换时，更新 --body-color CSS 变量：

router.beforeEach((to, from, next) => {
  document.documentElement.style.setProperty(
    '--body-color',
    `var(--body-color-${to.name})`
  );
  next();
});

示例代码：

// HomeView.vue
<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<style>
:root {
  --body-color: red;
}
</style>

// IntroView.vue
<template>
  <div>
    <h1>Introduction Page</h1>
  </div>
</template>

<style>
:root {
  --body-color: pink;
}
</style>

// index.html
<body style="background: var(--body-color);">
  <div id="app">
    <router-link to="/" exact>Home</router-link>
    <router-link to="/intro">Introduction</router-link>
    <router-view></router-view>
  </div>
</body>