vue3组合式api中的路由如何使用

在 Vue 3 中使用组合式 API 创建路由，需要使用 Vue Router 4。首先，我们需要安装 Vue Router 4：

npm install vue-router@4.0.0-beta.3

接着，在 main.js 中导入 Vue Router 4：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

然后，我们需要在 router.js 文件中定义路由和它们的组件：

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

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

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

export default router

在组件中使用路由，我们需要使用 `useRoute` 和 `useRouter`：

import { useRoute, useRouter } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const router = useRouter()

    const goToAbout = () => {
      router.push('/about')
    }

    return {
      route,
      goToAbout
    }
  }
}

在上面的代码中，我们使用 `useRoute` 获取当前路由对象，使用 `useRouter` 获取路由实例，然后使用 `router.push` 方法跳转到 `/about` 路由。