vue3 导航栏路由配置

在Vue3项目中配置导航栏路由的步骤如下：
1. 首先，安装Vue Router。你可以使用 npm 或者 yarn 命令来安装Vue Router。
2. 在项目的主文件（通常是 main.js）中导入 Vue Router，并使用 Vue.use() 方法注册它。
3. 创建一个新的路由文件，例如 router.js。在这个文件中，你需要导入 Vue 和 Vue Router，并使用 Vue.use() 方法注册 Vue Router。
4. 在路由文件中定义你的路由配置。你可以使用 Vue Router 提供的 createRouter() 方法来创建一个新的路由实例，并在其中定义你的路由。
5. 在主文件（通常是 main.js）中使用你的路由配置。通过将创建的路由实例传递给 createApp().use() 方法，将路由配置应用到你的 Vue 应用中。
6. 在你的导航栏组件中，使用 Vue Router 提供的 router-link 组件来生成路由链接。你可以在组件的 template 中使用 router-link 标签，并将 to 属性设置为你想要的路由路径。

以下是一个示例代码，演示如何在 Vue3 中配置导航栏路由：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

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

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

export default router

// NavigationBar.vue
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <!-- 更多路由链接 -->
  </div>
</template>

<script>
export default {
  // 组件逻辑
}
</script>

<style>
/* 组件样式 */
</style>