vue3 页面跳转写法

在 Vue3 中，可以使用 `router-link` 组件实现页面跳转。使用方法如下：

1. 首先，确保已经安装并导入了 Vue Router：

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

2. 在组件中使用 `router-link` 组件，如下所示：

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

其中，`to` 属性指定了跳转的目标路由路径。

3. 在路由配置中定义目标路由路径：

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

其中，`path` 属性指定了路由路径，`component` 属性指定了目标组件。

完整的示例代码如下所示：

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

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HomePage'
})
</script>

import { createRouter, createWebHistory } from 'vue-router'
import HomePage from './pages/HomePage.vue'
import AboutPage from './pages/AboutPage.vue'

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

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

export default router

在上面的代码中，`HomePage` 和 `AboutPage` 分别是两个组件，`/` 和 `/about` 是两个路由路径。我们在 `HomePage` 组件中使用了 `router-link` 组件，并指定了跳转到 `/about` 路由路径。在路由配置中，我们定义了 `/about` 路由路径对应的组件是 `AboutPage`。