解决不同路由页面的导航栏样式不同的问题

因为懒得每个路由页面都复用一遍导航栏，所以直接在

// App.vue
<el-container>
      <el-header id="header" :class="nav()">
        <hNav></hNav>
      </el-header>
      <el-main id="main">
        <RouterView />
      </el-main>
      <el-footer id="footer">
        <foot></foot>
      </el-footer>
 </el-container>

但是需求是部分页面导航栏有样式改变，所以解决办法是：

在路由文件中添加元信息（Meta Fields），在每个路由配置中添加一个 meta 字段，用于存储与该路由相关的元信息

//router.js
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/index',
      name: 'index',
      component: index,
      meta: { title: '首页', navbar: 'nav1' }
    },
    {
      path: '/about',
      name: 'about',
      component: about,
      meta: { title: '关于我们', navbar: 'nav2' }
    },
    ……
    ]})

之后在App.vue页面中进行当前获取并判断

//App.vue
<script setup>
import hNav from './components/hNav/hNav.vue'
import foot from './components/foot/foot.vue'
import { RouterView } from 'vue-router'
import { useRoute } from 'vue-router';

const route = useRoute();
// 根据路由携带的参数判断导航栏样式
const nav = () => {
  return route.meta.navbar === 'nav1' ? 'nav1' : 'nav2';
};
</script>

<style scoped lang="scss">
  #header {
    height: auto;
  }

  .nav1 {
    position: absolute;
  }

  .nav2 {
    position: relative;
    background-color: #F2F8FF;
  }
</style>

如果样式变化更大，可以直接使用两个导航栏组件，通过判断哪个页面使用哪个组件，使用 display:none 即可切换~