在
Vue 中切换页面时，通常可以使用
Vue Router 来进行
页面路由的控制。你可以在每个
页面组件
中设置不同的
顶部导航栏，然后在路由配置
中指定每个
页面对应的组件。
例如，你可以在 App.
vue 中设置一个统一的
顶部导航栏组件，然后在每个
页面组件
中设置不同的导航栏
内容。在路由配置
中，指定每个
页面对应的组件即可。
下面是一个简单的示例代码：
```html
<!-- App.
vue -->
<template>
<div>
<TopNav />
<router-view />
</div>
</template>
<script>
import TopNav from './components/TopNav.
vue'
export default {
components: {
TopNav
}
}
</script>
```
```html
<!-- 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>
```
```html
<!-- 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>
```
```javascript
// 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 钩子
中更新
页面标题。这样，在
切换页面时，
顶部导航栏的标题也会随之改变。
140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
