当vue路由变化时,改变导航栏

可以通过监听路由变化来改变导航栏。具体实现如下：

1. 在导航栏组件中，使用`watch`监听路由变化：

watch: {
  $route(to, from) {
    // 这里可以根据to和from的不同，来改变导航栏的状态
  }
}

2. 在路由配置中，给每个路由添加一个`meta`字段，用于指定该路由对应的导航栏项：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: '首页',
      navItem: 'home'
    }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      title: '关于我们',
      navItem: 'about'
    }
  },
  // ...
]

3. 在导航栏组件中，根据路由的`meta`字段来判断哪个导航栏项应该被激活：

<template>
  <div>
    <ul>
      <li :class="{active: activeNavItem === 'home'}">首页</li>
      <li :class="{active: activeNavItem === 'about'}">关于我们</li>
      <!-- 其他导航栏项 -->
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNavItem: '' // 当前激活的导航栏项
    }
  },
  watch: {
    $route(to, from) {
      this.activeNavItem = to.meta.navItem
    }
  }
}
</script>

这样，当路由变化时，就会触发`watch`方法，从而改变导航栏的状态。同时，根据路由的`meta`字段，可以确定哪个导航栏项应该被激活。