网站开发app开发培训小型购物网站开发
在 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 插件和工具链无缝协作。