写一个vue3 经路由页面跳转例子

可以使用Vue Router来实现路由页面跳转。下面是一个简单的Vue3经路由页面跳转例子：

1.首先需要安装Vue Router：

npm install vue-router@4.0.0-beta.8

2.在main.js中引入Vue Router并创建路由：

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

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

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

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

3.在App.vue中添加路由链接：

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

4.创建Home.vue和About.vue组件：

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      title: 'Home Page'
    }
  }
}
</script>

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  name: 'About',
  data() {
    return {
      title: 'About Page'
    }
  }
}
</script>

这样就可以实现简单的Vue3经路由页面跳转了。如果需要携带参数，可以使用query或params方式传递参数。如果需要使用keep-alive缓存组件，可以在路由配置中添加meta属性并在组件中使用keep-alive标签。