vue3实现动态导航栏

Vue3 实现动态导航栏主要需要以下步骤：

1. 创建一个导航栏组件 Nav.vue，使用 v-for 循环渲染导航栏列表，每个列表项绑定一个路由链接。

2. 在 App.vue 中引入 Nav.vue 组件，并在路由配置中定义导航栏列表的数据源。

3. 在路由配置中定义路由信息，包括路由名称、路径和组件。

4. 在 Nav.vue 组件中通过 $route 对象获取当前路由信息，根据路由名称高亮导航栏列表项。

下面是具体实现步骤：

1. Nav.vue 组件代码：

<template>
  <nav>
    <ul>
      <li v-for="item in navList" :key="item.path" :class="{ active: item.name === $route.name }">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        { name: 'Home', path: '/' },
        { name: 'About', path: '/about' },
        { name: 'Contact', path: '/contact' }
      ]
    }
  }
}
</script>

<style>
.active {
  color: red;
}
</style>

2. App.vue 组件代码：

<template>
  <div>
    <Nav />
    <router-view />
  </div>
</template>

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

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

3. 路由配置代码：

import Home from './views/Home.vue'
import About from './views/About.vue'
import Contact from './views/Contact.vue'

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

const router = createRouter({
  history: createWebHistory(),
  routes
})

4. 在 Nav.vue 组件中通过 $route 对象获取当前路由信息，并根据路由名称高亮导航栏列表项的代码：

<template>
  <nav>
    <ul>
      <li v-for="item in navList" :key="item.path" :class="{ active: item.name === $route.name }">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        { name: 'Home', path: '/' },
        { name: 'About', path: '/about' },
        { name: 'Contact', path: '/contact' }
      ]
    }
  }
}
</script>

<style>
.active {
  color: red;
}
</style>

这样，就可以实现一个动态导航栏了。