vue3 路由跳转 导航高亮

在 Vue 3 中，可以使用 Vue Router 进行路由跳转和导航高亮。下面是一个简单的示例：

1. 首先，确保已经安装了 Vue Router。你可以使用以下命令进行安装：

npm install vue-router@next

2. 在你的应用程序的入口文件（通常是 `main.js` 或 `main.ts`）中，导入 Vue Router 并创建一个实例：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 定义你的路由
    // { path: '/home', component: Home }
  ]
})

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

3. 在你的模板中，使用 `<router-link>` 组件来生成导航链接。该组件会自动根据当前路由状态添加一个 `router-link-active` 类，你可以使用该类来设置导航高亮样式。

<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>

4. 如果你需要在导航链接被点击时进行一些操作，可以使用路由守卫。例如，你可以在导航链接被激活时添加一个自定义类：

router.beforeEach((to, from, next) => {
  // 在每次导航前执行操作
  const activeLink = document.querySelector('.router-link-active')
  if (activeLink) {
    activeLink.classList.remove('router-link-active')
  }
  next()
})

这样，当用户点击导航链接时，当前链接会自动添加 `router-link-active` 类，并在下次导航前移除。

请注意，以上只是一个简单的示例，你需要根据你的具体需求进行调整。如果你想了解更多关于 Vue Router 的用法和配置，请查阅官方文档。