在Vue3中实现页面跳转主要是通过Vue Router来完成的。以下是一个基本步骤概述：

1. 安装Vue Router：

npm install vue-router@4

2. 创建路由文件：

在项目中的 src 目录下新建一个 router 文件夹，并在其中创建 index.js 或者你自定义名称的路由配置文件，例如：

// src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'

import Home from '../views/Home.vue'

import About from '../views/About.vue' // 假设你有两个页面：Home 和 About

const routes = [

{

path: '/',

name: 'home',

component: Home,

},

{

path: '/about',

name: 'about',

component: About,

},

]

const router = createRouter({

history: createWebHistory(),

routes,

})

export default router

3. 在主入口文件（main.js）中引入并使用Vue Router：

// src/main.js

import { createApp } from 'vue'

import App from './App.vue'

import router from './router' // 引入上面创建的路由模块

const app = createApp(App)

// 注册全局路由

app.use(router)

app.mount('#app')

4. 在 Vue 组件中进行路由跳转：

• 编程式导航：

你可以在组件的方法或生命周期钩子中使用 router.push() 来进行页面跳转。

// 在某个组件内部

this.$router.push({ name: 'about' }) // 通过名称跳转到 'about' 路由

• 声明式导航：

使用 <router-link> 组件在模板中设置链接。

<!-- App.vue 或其他任何组件 -->

<template>

<div>

<router-link to="/">首页</router-link>

<router-link to="/about">关于我们</router-link>

<router-view /> <!-- 这里是路由匹配到的组件内容将被渲染的地方 -->

</div>

</template>

5. 新开窗口打开页面：

如果你需要在新窗口或者新标签页中打开页面，可以使用 target="_blank" 属性：

<router-link to="/about" target="_blank">关于我们（新窗口打开）</router-link>

按照以上步骤配置后，Vue3 应用就能够根据路由配置正确地进行页面跳转了。