vue3的编程时路由跳转

在Vue3中，路由跳转可以使用Vue Router。下面是一个简单的例子：

首先需要在项目中安装Vue Router：

npm install vue-router

然后在main.js中引入Vue Router并创建一个路由实例：

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

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

在上面的代码中，我们首先引入了Vue Router和我们的App组件。然后我们创建了一个路由实例，其中包含了两个路由：

- `path: '/'`表示根路径
- `path: '/about'`表示关于页面

接下来我们将路由实例注册到我们的Vue应用中：`app.use(router)`。

现在我们可以在组件中使用`router-link`组件来实现路由跳转：

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

在上面的代码中，我们使用了`router-link`组件来创建两个链接，分别链接到根路径和关于页面。我们还使用了`router-view`组件来渲染当前路由所对应的组件。

这就是Vue3中使用Vue Router实现路由跳转的基本方法。