vue3如何使用router跳转

Vue 3中使用Vue Router进行页面跳转的步骤如下：

1. 首先，安装Vue Router插件。可以使用npm或yarn命令进行安装：

npm install vue-router

2. 在Vue项目的入口文件（通常是main.js）中导入Vue Router并使用它：

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

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

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

3. 在Vue组件中使用router-link标签进行页面跳转。router-link是Vue Router提供的组件，用于生成带有正确路径的链接。

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

4. 在Vue组件中使用router-view标签来显示当前路由对应的组件。router-view是Vue Router提供的组件，用于根据当前路由显示相应的组件。

<router-view></router-view>

这样，当用户点击router-link标签时，Vue Router会根据to属性的值进行页面跳转，并在router-view中显示对应的组件。