you want to click the navigation menu to change the route, listen to the name attribute of the route, and change the highlight menu options
now click to switch routes, but cannot trigger watch of App.vue or Header.vue
App.vue
<template>
<v-app class="body">
<Header></Header>
<v-content>
<router-view></router-view>
</v-content>
</v-app>
</template>
<script>
import Header from "./components/Header.vue"
export default {
components: {
Header
},
watch: {
$router: function(route) {
console.log(route)
}
},
}
</script>
Header.vue
<template>
<div class="nav-box">
<nav class="center">
<div class="nav-left">
<div>
<v-img
:src="require("@/assets/image/logo.png")"
aspect-ratio="1.7"
width="40px"
height="40px"
></v-img>
</div>
<div class="nav-list">
<router-link :to=""/"">
<div class="nav-item"> </div>
</router-link>
<router-link :to=""publicClass"">
<div class="nav-item" :class="{active:active==="publicClass"}"></div>
</router-link>
<router-link :to=""specialClass"">
<div class="nav-item"></div>
</router-link>
<router-link :to=""me"">
<div class="nav-item"></div>
</router-link>
</div>
</div>
</nav>
</div>
</template>
<script>
export default {
data (){
return {
active: "publicClass"
}
},
watch: {
$router: function(route) {
console.log(route)
}
},
mounted: function() {
console.log(this.$route)
}
}
</script>