Vue/Vue Router Scoped CSS Not Clearing on Navigation

Question

I've not been able to find any thing about this issue so far, hopefully it's something simple that someone here has come across before. The code and example below have been simplified for brevity.

I'm using Vue V3 with Vue CLI for running it locally.

I have two views which have an element with the same class in each, I'm using scoped CSS for the styling of the element and Vue Router to handle routing.

I load the first page, Home, and see the background image as expected however when I click the next button it takes me to the next page with the correct URL and content but still shows the image from the scoped CSS on the Home view.

If I then do a full refresh in the browser the styling clears, is this a bug in Vue of do I need to do something to force a clearing of the style?

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>

Boussadjra Brahim Boussadjra Brahim · Accepted Answer · 2021-06-07T10:20:20

In Home.vue component style add the scoped attribute to the style tag:

<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 Router Scoped CSS Not Clearing on Navigation

1 Answers