一、Vue路由简介和基础使用
1.1 生活中的路由
设备和ip的映射关系
1.2 nodejs路由
接口和服务的 映射 关系
1.3 前端路由
路径和组件的 映射 关系
- 路由是什么呢?
路由是一种映射关系 - Vue中的路由是什么?
路径和组件的映射关系
1.4 为何使用路由
目标：了解为何使用路由
具体使用示例: 网易云音乐 https://music.163.com/
单页面应用(SPA)：所有功能在 一个html页面 上实现
前端 路由作用： 实现业务场景切换
优点：
整体 不刷新页面 ，用户体验更好
数据传递容易, 开发 效率高
缺点：
开发成本高(需要学习专门知识)
首次加载会比较慢一点。不利于seo
- 什么是单页面应用?
所有的业务都在一个页面编写，只有一个html - 单页面应用好处?
开发效率高，用户体验好 - 单页面如何切换场景?
依赖路由切换显示
1.5****vue-router
目标： vue-router本质是一个第三方包
官网： https://router.vuejs.org/zh/
vue-router模块包
它和 Vue.js 深度集成
可以定义 - 视图表(映射规则)
模块化的
提供2个内置全局组件
声明式导航自动激活的 CSS class 的链接
以后Vue中如何实现路由?
集成vue-router模块包
1.6 组件分类
目标： .vue文件分2类，一个是页面组件，一个是复用组件
.vue文件本质无区别，方便大家学习和理解，总结的一个经验
src/views文件夹
页面组件 - 页面展示 - 配合路由用
src/components文件夹
复用组件 - 展示数据/常用于复用
1. 为何把.vue文件分类?
方便理解和使用
2. 页面组件用在哪里?
配合路由，切换页面
3. 复用组件用在哪里?
页面组件，重复渲染结构一样的标签
1.7 vue-router模块
目标：学会vue-router路由系统使用
步骤：
① 下载vue-router模块到当前工程（下载路由）
如果 vue 项目是 2.0 版本，那么直接适用 yarn add vue-router 则会报下面的错误。
原因：
原因主要就是我们在下载 vue-router 的时候下载的是最新版的 （ 以4开头 ），但是这个版本它是给 Vue 3 准备的，所以我们 要卸载 vue-router，然后限制他的版本。
解决方案：
使用命令 yarn remove vue-router 卸载当前版本
安装指定的版本 yarn add vue-router@3
② 在main.js中引入VueRouter函数（引入路由）
③ 添加到Vue.use()身上 -- 注册全局RouterLink和RouterView组件（注册路由）
④ 创建路由规则数组 -- 路径和组件名对应关系（创建路由规则）
⑤ 用规则生成路由对象（生成路由对象）
⑥ 把路由对象注入到new Vue实例中（注入vue实例）
⑦ 用 router-view 作为挂载点，切换不同的路由页面（挂载路由）
注意: 一切都要以url上hash值为准
1. vue-router本质是什么?
第三方包，下载后集成到vue项目中
2. vue-router 如何使用?
下包/引入/注册/规则/路由对象/注入/挂载点
3. 规则如何生效?
切换url上hash值，开始匹配规则，对应组件展示到 router-view 位置
二、声明式导航
2.1 声明式导航
目标：可用组件router-link来替代a标签
- vue-router提供了一个全局组件 router-link
- router-link实质上最终会渲染成a链接 to属性等价于提供 href属性( to无需# )
- router-link提供了声明式 导航高亮 的功能( 自带类名 )
- router-link是什么?
VueRouter在全局注册的组件，本质就是a标签 - router-link怎么用?
当标签使用，必须传入to属性，指定路由路径值 - router-link好处?
自带激活时的类名，可以做高亮
2.2 声明式导航 - 跳转传参
目标：在跳转路由时，可以给路由对应的组件内传值
在router-link上的to属性传值，语法格式如下：
方式一：query 查询字符串的形式传值
① /path ?参数名=值
对应页面组件接收传递过来的值
② $route.query.参数名
方式二：params 的形式传值
① /path/值 -- 需要路由对象提前配置 path: "/path/参数名"
② route.params.参数名**
**1. 声明式导航跳转时, 如何传值给路由页面?**
**to="/path?参数名=值"**
**to="/path/值" (需在路由规则里配置/path/:参数名)**
**2. 如何接收路由传值?**
**route.query.参数名
$route.params.参数名
三、 重定向和模式
3.1 路由 - 重定向
目标：匹配path后，强制跳转path路径
网页打开url默认hash值是 / 路径
redirect是设置要重定向到哪个路由路径
1. 如何监测默认路由?
规则里定义path: '/'
2. 如何重定向路由路径?
redirect配置项，值为要强制切换的路由路径
3.2 路由 - 404
目标：找不到路径给个提示页面
路由最后，path匹配 * (任意路径) -- 前面不匹配就命中最后这个
如何给路由体系里设置404页面?
在数组最后一个位置，插入匹配 * 的规则，展示404页面
3.3 路由 - 模式设置
目标：修改路由在地址栏的模式
hash路由例如: http://localhost:8080/#/home
history路由例如: http://localhost:8080/home (以后上线需要服务器端支持，否则找的是文件夹)
如何修改路由模式呢?
在实例化路由对象时，传入mode选项和值修改
四、编程式导航
4.1 编程式导航 - 基础使用
目标：用JS代码来进行跳转
语法: path或者name任选一个
JS如何切换路由路径?
this.$router.push()配置path/name
要和路由规则数组里对应
4.2 编程式导航 - 跳转传参
目标：JS跳转路由，传参
语法: query或者params任选一个
注意: 使用path会忽略params
传参：
接收：
**五、**嵌套和守卫
5.1 路由 - 路由嵌套
目标：在现有的一级路由下，再嵌套二级路由
二级路由示例-网易云音乐-发现音乐下 https://music.163.com/
目标：在现有的一级路由下，再嵌套二级路由
- 创建需要用的所有组件
src/views/FindMusic .vue -- 发现音乐页
src/views/MyMusic .vue -- 我的音乐页
src/views/children /MusicRecommend .vue -- 发现音乐页 / 推荐页面
src/views/children /MusicRanking .vue -- 发现音乐页 / 排行榜页面
src/views/children /SongList.vue -- 发现音乐页 / 歌单页面
- main.js-- 继续配置2级路由
一级路由path从 / 开始定义
二级路由往后path直接写名字，无需 / 开头
嵌套路由在上级路由的children数组里编写路由信息对象
- 说明：
App.vue的router-view负责发现音乐和我的音乐页面，切换
FindMusic .vue的 router-view 负责发现音乐下的三个页面，切换 - 二级路由如何配置?
创建需要的二级页面组件
路由规则里children中配置二级路由规则对象
一级页面中设置router-view显示二级路由页面 - 二级路由注意什么?
二级路由path一般不写根路径 /
跳转时路径要从 / 开始写全
5.2 声明式导航 -- 类名区别
观察路由嵌套导航的样式
router-link-exact-active (精确匹配) url中hash值路径，与href属性值完全相同，设置此类名
router-link-active (模糊匹配) url中hash值，包含href属性值这个路径
- 自动添加的2个类名的区别?
router-link-exact-active -- url 的 hash 值和 href 完全匹配
router-link-active -- url 的 hash 值包含 href 路径值匹配
5.3 全局前置守卫
目标：路由跳转之前, 会触发一个函数
例如: 登陆状态去 <我的音乐> 页面，未登录弹窗提示
语法: router.beforeEach((to, from, next) =>｛｝)
一定调next()，才会跳转下一页
什么是路由守卫?
路由在真正跳转前，会执行一次 beforeEach 函数，next调用则跳转，也可以强制修改要跳转的路由