VUE3怎么实现页面跳转

在 Vue3 中，可以使用 Vue Router 来实现页面跳转。Vue Router 是官方提供的路由管理器，用于实现单页应用中的路由跳转、组件加载等功能。下面是一些简单的示例代码，演示如何在 Vue3 中实现页面跳转。

首先，需要安装 Vue Router：

npm install vue-router

然后，在 Vue3 项目的入口文件 main.js 中，引入并使用 Vue Router：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

接下来，在项目中创建一个 router.js 文件，用于配置路由：

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

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

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

export default router

在这个示例中，定义了两个路由，分别对应了项目的首页和关于页面。其中，Home 和 About 分别是对应页面的组件，可以在 views 目录下创建对应的组件文件。

最后，在项目中可以使用 router-link 组件来实现页面跳转，示例代码如下：

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

在这个示例中，使用了 router-link 组件来创建了两个链接，分别对应了首页和关于页面。在 router-view 组件中，会根据当前路由来动态渲染对应的组件。