Vue/Vue 路由器作用域 CSS 不清除导航

Question

到目前为止，我还没有找到关于这个问题的任何信息，希望这里有人以前遇到过这个问题。为简洁起见，下面的代码和示例已经过简化。

我在本地使用 Vue V3 和 Vue CLI 运行。

我有两个视图，每个视图都有一个具有相同 class 的元素，我使用作用域 CSS 来设置元素的样式，并使用 Vue Router 来处理路由。

我加载了首页，并按预期看到了背景图像，但是当我单击下一个按钮时，它会将我带到具有正确 URL 和内容的下一页，但仍然显示来自主页视图上的作用域CSS。

如果我随后在浏览器中进行完全刷新，样式会清除，这是 Vue 中的错误吗，我是否需要执行某些操作来强制清除样式？

Home.vue

<template>
<div 
    v-if="content" 
    class="content"
  >
     <router-link :to="`/next-page`">
      Next
    </router-link>
</div>
</template>

<style>
.content {
  min-height: 100vh;
  background-size: cover;
  background-image: url(https://assets.website-files.com/5e832e12eb7ca02ee9064d42/5f915422ccb28e626ad16e20_Group%20939.jpg);
}

.content:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,.5);
  top: 0;
  left: 0;
}
</style>

NextPage.vue

<template>
<div 
    v-if="content" 
    class="content"
  >
      Some text content
     <router-link :to="`/home">
      Back
    </router-link>
</div>
</template>

Answer 1

在Home.vue组件样式中添加scoped属性到样式标签：

<style scoped>
.content {
  min-height: 100vh;
  background-size: cover;
  background-image: url(https://assets.website-files.com/5e832e12eb7ca02ee9064d42/5f915422ccb28e626ad16e20_Group%20939.jpg);
}

.content:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,.5);
  top: 0;
  left: 0;
}
</style>

Vue/Vue 路由器作用域 CSS 不清除导航

Vue/Vue Router Scoped CSS Not Clearing on Navigation

javascript

vue.js

vue-router