Vue3 路由跳转教程：使用 Vue Router 进行页面导航

在 Vue3 中，使用 Vue Router 进行路由跳转的方法与 Vue2 相同。

首先，在 Vue3 项目中安装 Vue Router：

npm install vue-router@next

然后，在项目的入口文件中，引入 Vue Router 并创建路由实例：

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

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    // 定义路由
  ]
})

接下来，可以定义路由：

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

其中，path 表示路由的路径，name 是路由的名称，component 是路由对应的组件。

最后，在需要跳转路由的地方，可以使用router.push()方法进行跳转：

<template>
  <button @click='goToAbout'>Go to About</button>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      this.$router.push('/about')
    }
  }
}
</script>

在 Vue3 中，可以使用$router 访问路由实例，然后调用push() 方法进行路由跳转。