在 Vue 3 中，实现页面跳转的常见方法通常与 Vue Router 配合使用。Vue Router 是 Vue.js 官方提供的路由解决方案。以下是实现页面跳转的一些基本步骤：

1. 安装 Vue Router

首先确保你已经安装了 Vue Router。你可以使用 npm 或 yarn 进行安装：

npm install vue-router  
# 或者  
yarn add vue-router  

2. 设置 Vue Router

创建一个 router 文件夹，通常会有一个 index.js 或 index.ts 文件用于配置路由。

// src/router/index.js  
import { createRouter, createWebHistory } from 'vue-router';  
import Home from '../views/Home.vue';  
import About from '../views/About.vue';  
const routes = [  
  { path: '/', component: Home },  
  { path: '/about', component: About }  
];  
const router = createRouter({  
  history: createWebHistory(process.env.BASE_URL),  
  routes  
});  
export default router;  

3. 在 Vue 应用中使用路由

在 main.js 中，将路由器实例与 Vue 应用一起使用：

// src/main.js  
import { createApp } from 'vue';  
import App from './App.vue';  
import router from './router';  
createApp(App).use(router).mount('#app');  

4. 创建视图组件

为每个路由创建相应的视图组件，例如 Home.vue 和 About.vue：

<!-- src/views/Home.vue -->  
<template>  
  <div>  
    <h1>Home Page</h1>  
    <router-link to="/about">Go to About</router-link>  
  </div>  
</template>  

<!-- src/views/About.vue -->  
<template>  
  <div>  
    <h1>About Page</h1>  
    <router-link to="/">Go to Home</router-link>  
  </div>  
</template>  

5. 使用 <router-view>

在主组件（通常是 App.vue）中使用 <router-view> 显示匹配路由的组件：

<!-- src/App.vue -->  
<template>  
  <div id="app">  
    <router-view></router-view>  
  </div>  
</template>  

6. 使用程序化导航

除了使用 <router-link> 进行导航，你也可以在脚本中编程实现导航：

// 在你的组件中使用  
this.$router.push('/about');  // 跳转到 About 页面  

或者在组合式 API 中：

import { useRouter } from 'vue-router';  
export default {  
  setup() {  
    const router = useRouter();  
    function goToAbout() {  
      router.push('/about');  
    }  
    return { goToAbout };  
  }  
};  

这就是在 Vue 3 中使用 Vue Router 实现页面跳转的基本步骤。通过 Vue Router，你可以轻松地管理应用中的不同视图，并处理导航和历史记录。