vue3 router根据路由跳转新页面

Vue3中的路由跳转需要使用Vue Router，以下是一个简单的示例：

1. 首先，安装Vue Router

npm install vue-router@4.0.0-0

2. 在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')

3. 在router.js中定义路由

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('./views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('./views/About.vue')
  }
]

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

export default router

4. 在组件中使用`router-link`标签进行路由跳转

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

5. 如果需要在JS代码中进行路由跳转，则可以使用`router.push()`方法

methods: {
  goToAboutPage() {
    this.$router.push('/about')
  }
}