vue3 router base

Vue 3的路由器基础是通过Vue Router库来实现的。要使用Vue Router在Vue 3项目中配置路由，需要进行以下步骤：

1. 安装Vue Router库：

   npm install vue-router@next

2. 在项目的入口文件（通常是main.js）中导入Vue Router库和要使用的组件：

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

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

3. 创建路由器实例并配置路由：

   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(),
     routes
   })

   export default router

4. 在Vue组件中使用路由：

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

       <router-view></router-view>
     </div>
   </template>

上述代码中，`createRouter`函数用于创建路由器实例，`createWebHistory`函数用于创建浏览器历史记录模式。`routes`数组定义了项目中的各个路由和对应的组件。在Vue组件中，`<router-link>`用于导航到不同的路由，`<router-view>`用于显示当前路由对应的组件。

这是Vue 3中使用Vue Router的基本配置，你可以根据实际需求进一步定制和扩展路由功能。