When modifying element styles using JavaScript, how can this be achieved when returning history?

Question

In the navigation bar, I have used the active link style. For example, in the navigation bar I have links about us, contact us, materials, quizzes, etc. When these links are clicked, the routing will change, such as 'http://localhost:3000/about-us', 'http:/ /localhost:3000/material' etc., and the activity class is then applied to the link to highlight it on the corresponding route.

When switching links, the activity class is applied correctly, but I noticed that when going back to the history like '/home' from '/material' (hitting the back button in the browser), the activity class Will not be applied. It still applies to links on the same route (before clicking back).

I've used javascript in mounted() to apply active class styles to the navigation links (for initial route checking and applying styles) and also to toggle when the link is clicked.

So, what's the reason it doesn't change when going back into history?

Answer 1

If you use vue-router and its <router-link> components, you don't need to manage this yourself :)

This component will apply a special CSS class to the current active link. By default, the CSS class is router-link-active.

<style>
/* 样式化当前活动链接 */
.router-link-active {
   background-color: blue;
}
</style>

Documentation: https://router.vuejs.org/api/#active-class

Answer 2

Please note that classes in Nuxt are actually

• nuxt-link-active
• nuxt-link-exact-active

Here is an example: https://nuxtjs.org/examples/routing-active-links-classes

This can be changed via configuration as follows: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-router#linkactiveclass