vue中watch无法监听路由

Question

想实现点击导航菜单更改路由，并监听路由的name属性，改变高亮菜单选项

现在点击能实现切换路由，但是无法触发App.vue或者Header.vue的watch

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>

Answer 1

watch: {
 '$route' (to, from) {
   // 逻辑
  }
}

Answer 2

vuetify的v-tabs组件不能解决你的需求吗？需要自己手写路由。