vue中切换页面时怎么改变顶部导航栏

在 Vue 中切换页面时，通常可以使用 Vue Router 来进行页面路由的控制。你可以在每个页面组件中设置不同的顶部导航栏，然后在路由配置中指定每个页面对应的组件。

例如，你可以在 App.vue 中设置一个统一的顶部导航栏组件，然后在每个页面组件中设置不同的导航栏内容。在路由配置中，指定每个页面对应的组件即可。

下面是一个简单的示例代码：

<!-- App.vue -->
<template>
  <div>
    <TopNav />
    <router-view />
  </div>
</template>

<script>
import TopNav from './components/TopNav.vue'

export default {
  components: {
    TopNav
  }
}
</script>

<!-- HomePage.vue -->
<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navTitle: 'Home'
    }
  },
  mounted() {
    this.$emit('update-nav', this.navTitle)
  }
}
</script>

<!-- AboutPage.vue -->
<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navTitle: 'About'
    }
  },
  mounted() {
    this.$emit('update-nav', this.navTitle)
  }
}
</script>

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import HomePage from './views/HomePage.vue'
import AboutPage from './views/AboutPage.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomePage
    },
    {
      path: '/about',
      name: 'about',
      component: AboutPage
    }
  ]
})

router.afterEach((to, from) => {
  // 更新顶部导航栏标题
  const navTitle = to.meta.navTitle || ''
  document.title = navTitle ? `${navTitle} - My App` : 'My App'
})

export default router

在上面的示例中，HomePage.vue 和 AboutPage.vue 组件都设置了一个 navTitle 变量，用于指定该页面对应的顶部导航栏标题。在 mounted 钩子中，通过调用 $emit 方法触发一个自定义事件，将当前页面的 navTitle 传递给父组件 App.vue。

在 App.vue 中，通过引入 TopNav.vue 组件，将其放置在页面顶部。同时，通过监听子组件触发的 update-nav 事件，将子组件传递过来的 navTitle 更新到顶部导航栏中。

最后，在路由配置中，通过 meta 属性指定每个页面对应的导航栏标题，然后在 router.afterEach 钩子中更新页面标题。这样，在切换页面时，顶部导航栏的标题也会随之改变。