### 路由跳转时保留
导航栏显示或状态的方法
在 Vue 中实现路由跳转的同时保持
导航栏的状态或防止其消失，可以通过多种方式完成。以下是几种常见且有效的解决方案。
#### 方法一：使用 `<keep-alive>` 组件缓存视图
`<keep-alive>` 是 Vue 提供的一个内置组件，用于缓存动态组件实例，从而避免重复渲染和销毁。如果希望
导航栏在页面切换时不被重新加载或消失，可以在布局文件中将其包裹在 `<keep-alive>` 标签内[^1]。
```vue
<template>
<el-container>
<!--
导航栏 -->
<el-
header>
<nav-menu></nav-menu> <!-- 假设这是你的
导航栏组件 -->
</el-
header>
<!-- 主体区域 -->
<el-main>
<keep-alive>
<router-view />
</keep-alive>
</el-main>
</el-container>
</template>
```
此方法适用于需要频繁访问的页面，能够显著提升用户体验，同时确保
导航栏始终存在[^1]。
---
#### 方法二：设置 `active-name` 属性以维持
导航栏高亮状态
对于基于 iView 的项目，可以利用 `active-name` 参数来控制当前激活的菜单项。当用户点击某个菜单触发路由跳转时，通过匹配路由名称 (`$route.name`) 和菜单项的 `name` 来更新 `active-name`[^2]。
```javascript
// 封装的
导航栏组件 (NavMenu.vue)
export default {
data() {
return {
activeName: this.$route.name, // 初始化为当前路由名
};
},
watch: {
$route(to) {
this.activeName = to.name; // 动态监听路由变化并同步到 activeName
},
},
};
```
模板部分：
```vue
<template>
<i-menu :active-name="activeName">
<menu-item name="首页">...</menu-item>
<menu-item name="关于">...</menu-item>
</i-menu>
</template>
```
这种方法不仅可以让
导航栏始终保持可见，还能自动调整选中的菜单项[^2]。
---
#### 方法三：统一管理
导航栏逻辑于父级组件
另一种常见的做法是在全局范围内维护
导航栏的状态。例如，在应用入口文件（如 `App.vue`）中引入
导航栏组件，并绑定 `$route.name` 到子组件属性上[^3]。
**父组件 (App.vue)**:
```vue
<template>
<div id="app">
<tab-bar :name="$route.name"></tab-bar> <!-- 将路由名传递给
导航栏 -->
<router-view />
</div>
</template>
<script>
import TabBar from './components/tab-bar';
export default {
components: { TabBar },
};
</script>
```
**子组件 (tab-bar.vue)**:
```vue
<template>
<
header>
<h1>{{ name }}</h1> <!-- 显示
对应页面的标题 -->
</
header>
</template>
<script>
export default {
props: ['name'], // 接收来自父组件的数据
};
</script>
```
这种方式的优势在于将
导航栏独立出来，无论哪个页面发生跳转都不会影响它的展示效果[^3]。
---
#### 方法四：合理设计路由结构
最后一种策略是从路由配置的角度出发，确保
导航栏属于顶层布局的一部分而非具体页面的内容。这样即使执行了 `this.$router.push()` 操作也不会导致整个界面重绘[^4]。
示例路由表：
```javascript
const routes = [
{
path: '/',
component: CommonLayout,
children: [
{ path: '', name: 'Home', component: Home },
{ path: 'about', name: 'About', component: About },
],
},
];
```
其中 `CommonLayout` 即包含了固定不动的
导航条以及可变的 `<router-view />` 容器[^4]。
---
### 总结
以上四种方案各有优劣，实际开发过程中可以根据需求灵活选用：
- 如果追求性能优化，则推荐 **方法一**；
- 若要求精准控制菜单样式，请尝试 **方法二**；
- 对于模块化程度较高的大型项目来说，建议采用 **方法三** 或者重构成嵌套路由形式 (**方法四**)。
扫一扫
422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
