vue3 vite 路由配置

在Vue 3和Vite中配置路由非常简单。以下是一个基本的路由配置步骤：

1. 在项目根目录下，创建一个新的文件夹（例如，`src/router`）来存放路由相关的文件。

2. 在该文件夹中创建一个新文件，命名为`index.js`或`router.js`（或者你喜欢的其他名称），作为路由的入口文件。

3. 在路由入口文件中，导入`vue-router`库以及你需要的组件。

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
// 导入其他需要的组件

4. 创建一个新的路由实例，并配置路由规则。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  // 添加其他路由规则
];

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

5. 导出路由实例，以便在主应用程序文件中使用。

export default router;

6. 在主应用程序文件（例如，`main.js`）中导入路由实例，并将其挂载到Vue应用程序中。

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

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

现在，你已经完成了Vue 3和Vite中的基本路由配置。你可以根据需要添加更多的路由规则，并在组件中使用`<router-link>`和`<router-view>`来实现页面导航和渲染。

希望这对你有帮助！如果你有任何其他问题，请随时提问。