vue3实现页面跳转

在Vue 3中，可以使用router来实现页面跳转。下面是一个简单的示例代码：

首先，安装vue-router库：

npm install vue-router@next

然后，在main.js中配置路由：

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

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

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

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

在上面的代码中，我们定义了两个路由：/对应Home组件，/about对应About组件。

接下来，我们可以在组件中使用router-link和router-view来实现页面跳转。

在Home.vue中：

<template>
  <div>
    <h1>Home Page</h1>
    <router-link to="/about">Go to About Page</router-link>
  </div>
</template>

在About.vue中：

<template>
  <div>
    <h1>About Page</h1>
    <router-link to="/">Go back to Home Page</router-link>
  </div>
</template>

现在，当我们点击Go to About Page链接时，将会跳转到/about路径；当点击Go back to Home Page链接时，将会跳转回/路径。

希望对你有所帮助！