vue中watch无法监听路由

• Z时代
• 2024-01-10
• 分类：技术分享

想实现点击导航菜单更改路由，并监听路由的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>

回答：

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

回答：

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

以上是 vue中watch无法监听路由 的全部内容， 来源链接： utcz.com/a/149064.html