路由跳转仿菜单栏不变

### 如何在单页应用中进行路由跳转同时保持菜单栏固定

为了实现在单页应用(SPA)中进行路由跳转的同时保持菜单栏固定，在构建应用程序结构时需注意区分静态和动态区域。通常情况下，菜单栏属于页面布局的一部分，应放置于不随路由变化而重新渲染的位置。

#### 使用 Vue Router 构建 SPA 应用程序框架

当使用 Vue.js 和 Vue Router 创建单页应用时，可以通过如下方式设置：

import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入组件
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes
})

new Vue({
  el: '#app',
  router, // 将路由器挂载到根实例上
  template: `
    <div>
      <!-- 这里是固定的菜单栏 -->
      <nav-bar></nav-bar>

      <!-- 动态加载的内容区 -->
      <router-view></router-view> 
      
      <!-- 如果还有其他公共部分也可以放在这里 -->
    </div>`
})

此代码片段展示了如何配置 Vue Router 并将其集成到 Vue 实例中[^5]。`<nav-bar>`标签代表的是一个自定义的菜单栏组件，它位于 `<router-view>` 外部意味着无论当前显示哪个视图，该菜单都将始终存在并维持其状态不变。

#### 设计 HTML 结构以支持固定顶部导航条

对于希望保留顶部导航条的应用来说，HTML 布局应当设计成让导航条独立存在于主要内容之外。这样做的好处是可以确保即使用户浏览不同的子页面，导航条也不会受到影响。

<div id="app">
  <header class="fixed-top"> <!-- CSS 类 .fixed-top 可使头部位置固定 -->
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/about">关于我们</a></li>
      ...
    </ul>
  </header>

  <main role="main" style="padding-top:70px;"> <!-- 给主要内容留出空间避免被覆盖 -->
    <router-view></router-view>
  </main>
  
  <footer>
     版权声明...
  </footer>
</div>

这里的关键在于将 `header` 定义为具有 `.fixed-top` 样式的元素，这通常是通过CSS来完成的，使得它可以相对于浏览器窗口始终保持在同一位置。与此同时，为了让下方的主要内容不至于被遮挡，可以在 `main` 中添加适当的高度偏移量作为内边距(padding)[^1]。

#### 利用 CSS 控制样式

要实现上述效果还需要配合一些简单的 CSS 来控制各个区块的行为:

.fixed-top {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1030; /* 确保导航栏处于最顶层 */
}

body {
  margin: 0;
}

这段 CSS 设置了`.fixed-top`类，使其能够粘附在屏幕顶端，并且设置了足够的z-index值以防止任何弹窗或其他浮动层挡住导航栏；同时也清除了默认 body 边距以免造成不必要的滚动条出现。