vue3中的router和route的使用

在 Vue3 中使用 router 和 route，需要先安装 `vue-router` 包。然后在 `main.js` 中导入和使用：

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

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

在 `router/index.js` 中，需要定义我们的路由：

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

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

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

在组件中使用 `route` 对象，可以获取当前路由的信息，例如：

<template>
  <div>
    <p>当前路由名字：{{ $route.name }}</p>
    <p>当前路由路径：{{ $route.path }}</p>
    <p>当前路由参数：{{ $route.params }}</p>
    <p>当前路由查询参数：{{ $route.query }}</p>
  </div>
</template>

其中，`$route.name` 获取当前路由的名称，`$route.path` 获取当前路由的路径，`$route.params` 获取当前路由的参数，`$route.query` 获取当前路由的查询参数。