前端路由如何从0开始配置？vue-router 的使用

在 Web 开发中，路由是指根据 URL 的不同部分将请求分发到不同的处理函数或页面的过程。路由是单页应用（SPA, Single Page Application）和服务器端渲染（SSR, Server-Side Rendering）应用中的一个重要概念。

---

在开发中如何去配置路由呢？

1、先安装对应的依赖包

npm add vue-router

2. 创建页面文件

• 创建布局页面 src\views\layout\index.vue
• 创建登录页面 src\views\login\index.vue

3. 创建路由

router/index.ts

import { createRouter, createMemoryHistory } from "vue-router";
import Layout from "@/views/layout/index.vue";// 创建一个路由器实例
const router = createRouter({history: createMemoryHistory(),routes: [{path: '/',component: Layout},{path: '/login',component: () => import('@/views/login/index.vue')}],
});export default router

配置对象中设置了 history 为 createMemoryHistory()，这意味着路由将在内存中管理，不依赖于浏览器的历史记录。

4. 导入使用

在main.ts中导入即可

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import "normalize.css";
import "@/styles/common.less";
import router from '@/router/index'// 创建实例 app
const app = createApp(App)
// 挂载到 app
app.mount("#app");
// 在 app 安装插件 router
app.use(router)

---

推荐一个组件npm add vite-plugin-vue-setup-extend -D

vite-plugin-vue-setup-extend是一个 Vite 插件，旨在增强 Vue 3 的 <script setup> 语法。它提供了一些额外的功能和改进，以提高开发体验，特别是在使用 TypeScript 时。

• 它可以改善在 <script setup> 中定义的变量、函数和组件属性的 TypeScript 类型推断。
• 可以提供更好的自动补全支持，使得开发者可以在编辑器中更方便地编写代码。
• 允许在其他地方引用 <script setup> 中定义的组件，并且能够正确识别其类型。
• 通过生成 .d.ts 文件来暴露组件的类型信息，从而可以在项目中的其他地方导入并使用这些类型。
• 与 Vite 和 Vue 3 完美集成，可以与其他 Vite 插件和工具链无缝协作。