vue3导航栏router-link

在Vue3中，你可以使用`<router-link>`组件来实现导航栏的跳转。

具体使用方法如下：

1. 首先，你需要在你的Vue项目中安装`vue-router`依赖：

npm install vue-router

2. 在`main.js`中引入`vue-router`并使用它：

import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import About from './components/About.vue'

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

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

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

3. 在你的导航栏中使用`<router-link>`组件：

<template>
  <nav>
    <ul>
      <li>
        <router-link to="/">Home</router-link>
      </li>
      <li>
        <router-link to="/about">About</router-link>
      </li>
    </ul>
  </nav>
</template>

这样，当你点击导航栏中的链接时，Vue会自动地帮你跳转到指定的页面。