## 一、路由到底是个啥？（基础概念篇） ### 1. 路由（Router） - **梗版**：你就把路由当成小区门口的保安大爷 —— 你报个门牌号（URL），大爷就告诉你该往哪栋楼走（加载哪个页面），绝对不会让你走错门。要是大爷不在（没路由），你就得在小区里瞎转悠（页面乱跳）。 - **专业版**：路由是 URL 与页面 / 组件之间的映射关系。当用户访问不同 URL 时，路由会根据预设的映射规则，自动加载对应的页面或组件，实现无刷新的页面切换。 ### 2. 单页面应用（SPA） - **梗版**：就像一个大火锅 —— 只有一个锅底（主页面），想吃毛肚（首页）、肥牛（详情页）、虾滑（设置页），直接往里下就行，不用换锅底（不刷新页面），效率高还省事儿！ - **专业版**：单页面应用是指整个应用只有一个主 HTML 页面，所有内容都在这个页面内动态加载和渲染。路由通过 JavaScript 实现页面内容的切换，避免了传统多页面应用的频繁刷新，提升用户体验。 ## 二、路由模式：三种 "指路牌" 的区别 ### 1. hash 模式（默认） - **梗版**：URL 里带个 "#"，像给指路牌贴了块胶布 —— 比如`http://xxx.com/#/home`。优点是胶布粘性好（兼容性强，IE 都认识），缺点是不好看，像个补丁。而且不管你怎么撕胶布（改后面的内容），门（页面）都不会重新开（不刷新）。 - **专业版**：基于 URL 的 hash 值（# 后面的部分）实现，通过`hashchange`事件监听变化。优点是兼容性极好，无需服务器配置；缺点是 URL 含不够美观，不利于 SEO。适用于中小型应用。 ### 2. history 模式 - **梗版**：URL 干干净净，像高档小区的金属指路牌 ——`http://xxx.com/home`，看着就舒服。但这牌子娇贵（需要服务器配置），要是配置不好，客人一回头（刷新页面）就找不着门（404 错误）。 - **专业版**：基于 HTML5 History API 实现，URL 无更美观且利于 SEO。但需要服务器支持（所有路径指向 index.html），否则刷新会 404。适用于对 URL 美观和 SEO 有要求的应用（如企业官网、电商）。 ### 3. abstract 模式 - **梗版**：这是给 "内部员工" 用的指路牌 —— 不在小区门口（非浏览器环境），比如在后台仓库（Node.js）、小程序里才用，普通业主（用户）看不到。 - **专业版**：不依赖浏览器环境，路由状态存于内存。适用于服务端渲染（SSR）、Weex 等非浏览器场景，一般 Web 应用用不到。 ### 代码示例（基础路由配置） ```typescript // router/index.ts import { createRouter, createWebHistory } from 'vue-router' // 导入页面组件 import Home from '../views/Home.vue' import User from '../views/User.vue' // 路由规则：URL和组件的对应关系 const routes = [ { path: '/home', // 访问路径 name: 'Home', // 路由名称（可选，方便编程式导航） component: Home // 对应组件 }, { path: '/user', name: 'User', component: User } ] // 创建路由实例 const router = createRouter({ history: createWebHistory(), // 路由模式（history模式） routes // 应用路由规则 }) export default router ``` ## 三、动态路由：一个页面搞定 N 种内容 ### 代码解析 - `path: '/home'`： - **梗版**：相当于 "小区 3 号楼" 的门牌号，用户按这个地址找，准能到家门口。 - **专业版**：定义浏览器访问的路径，是路由匹配的核心依据。 - `component: Home`： - **梗版**：门牌号对应的 "住户"，3 号楼住着 "Home 一家"，访问 3 号楼就找这家人。 - **专业版**：指定该路由匹配成功后要渲染的 Vue 组件。 - 路由模式： - **梗版**：`createWebHistory()`是 "高档小区无遮挡门牌号"（URL 无 #）；`createWebHashHistory()`是 "贴了胶布的门牌号"（URL 带 #）。 - **专业版**：`createWebHistory`基于 HTML5 History API，`createWebHashHistory`基于 URL hash，前者更美观但需服务器配置。 ### 1. 为啥需要动态路由？ - **梗版**：你逛 CSDN 时，所有博客页面长得都差不多（标题、内容区、评论区），就内容不一样。总不能每篇博客都单独写个页面吧？那程序员得累死！动态路由就是 "一鱼多吃"—— 一个页面模板，换不同内容。 - **专业版**：当多个 URL 需要匹配同一个组件（仅内容不同）时，动态路由可通过 URL 参数区分内容，避免重复开发组件。如博客详情页`/blog/1`、`/blog/2`，共用一个 Blog 组件，通过 id 参数加载不同内容。 ### 2. 动态参数怎么写？ - **梗版**：在路径里加个`:参数名`，像给抽屉贴标签 ——`/user/:id`，访问`/user/123`就打开 "123 号抽屉"，访问`/user/456`就打开 "456 号抽屉"，抽屉样式（组件）一样，里面的东西（数据）不同。 - **专业版**：通过`:参数名`定义动态部分，如`path: '/user/:id'`。访问`/user/123`时，参数`id`的值为 '123'，可通过`route.params.id`获取，实现组件复用。 ### 3. 参数还能搞限制？ - **梗版**：你可以规定 "抽屉只能放数字"——`/user/:id(\\d+)`，要是有人往抽屉里塞字母（访问`/user/abc`），就打不开（不匹配路由），防止瞎捣乱！ - **专业版**：支持正则约束参数格式，`\\d+`表示仅匹配数字；`?`表示可选参数（`/user/:id?`匹配`/user`或`/user/123`）；`*`表示通配符（`/user/*`匹配`/user/a/b`）。 ### 2. 动态路由代码实现 ```typescript // 路由配置（快递柜规则） const routes = [ { path: '/blog/:blogId', // :blogId是快递柜编号（动态参数） name: 'BlogDetail', component: () => import('../views/BlogDetail.vue') // 快递柜（组件） } ] // 组件中取参数（BlogDetail.vue） ``` ### 3. 代码逐行解析 - `path: '/blog/:blogId'`： - **梗版**：`:blogId`是快递柜的编号（1、2、3...），不管你存 1 号柜还是 2 号柜，柜子本身（BlogDetail 组件）是同一个，只是里面的快递（博客内容）不同。 - **专业版**：通过`:参数名`定义 URL 中的动态部分，`blogId`为参数名，访问`/blog/123`时，参数值为 '123'，存储在`route.params.blogId`中。多参数与约束示例 ```typescript // 多参数：快递柜+抽屉 path: '/user/:userId/post/:postId' // 匹配 /user/123/post/456 → params: { userId: '123', postId: '456' } // 参数约束：只允许数字编号 path: '/user/:userId(\\d+)' // 只匹配 /user/123，不匹配 /user/abc（字母不行） // 可选参数：可填可不填的编号 path: '/search/:keyword?' // 匹配 /search 或 /search/vue（keyword可选） ``` - - **梗版**：多参数就像 "快递柜 + 抽屉"，一层套一层；约束参数就像 "只收正方形快递"，圆形的不收；可选参数就像 "快递柜可匿名"，填不填编号都行。 - **专业版**：支持多参数、正则约束（如`\\d+`限制数字）、可选参数（`?`标记），提升路由匹配的精准性。 - `useRoute()`获取参数： - **梗版**：相当于快递柜的 "取件码生成器"，调用它就能拿到`route`对象，里面藏着`blogId`这样的取件码，凭码才能取快递（获取数据）。 - **专业版**：组合式 API 中获取当前路由信息的钩子函数，返回路由实例，通过`route.params`访问动态参数，替代 Vue2 中的`this.$route`。 #### 还是看不懂请看这里 ##### 一、先搞懂核心概念：路由参数你先想一个场景：我们有个博客网站，每篇博客都有唯一 ID（比如 `123`、`456`），对应的 URL 可能是 `http://xxx.com/blog/123`、`http://xxx.com/blog/456`。这里的 `123`、`456` 就是 **路由参数**（动态变化的部分），我们需要在组件里拿到这个参数，才能显示对应 ID 的博客内容 —— 而这段代码的作用，就是拿这个参数。 ##### 二、逐行拆解代码 ###### 1. 导入路由工具 `useRoute` ```javascript import { useRoute } from 'vue-router' ``` - `vue-router` 是 Vue 官方的路由库，用来管理页面跳转和 URL 配置； - `useRoute` 是 Vue Router 提供的「组合式 API」（专门给 ` ``` **题目**：实现嵌套路由`/shop`，包含子路由`/shop/goods`和`/shop/cart`，父组件显示导航栏，子组件在导航栏下方显示。 ```typescript // 路由配置 const routes = [ { path: '/shop', component: ShopLayout, children: [ { path: 'goods', component: ShopGoods }, { path: 'cart', component: ShopCart } ] } ] // ShopLayout.vue ``` 这样知识点、代码、搞笑解读全结合，是不是既学得懂又记得牢？路由这东西看着复杂，其实就是 "保安 + 快递柜 + 套娃 + 外卖" 的组合，多写几个例子就熟啦！

vue3超详细教学（傻瓜版）百万字超详细-路由...的全部评论