【路由】
路由， 是一种映射关系
比如生活中的路由， 是设备与ip地址的映射关系， 不同的设备连接到同一个路由器， 会得到一个唯一的ip地址
而vue3中的路由， 是路径与页面（组件）的映射关系， 即： 通过访问不同的路径， 得到不同的页面（组件）
这需要借助v-router第三方模块
【vue-router】
【组件存放目录】
vue文件分类：
1.页面组件
一个做好的， 大的， 形成的页面， 如京东首页， 仅用于做大块展示， 无需复用， 配合路由切换
存放目录： src/views
2.复用组件
一个个独立的小型页面， 可复用， 用来组装页面
存放目录： src/components
【基本使用和模块封装】
【基本使用(4+2)】
1演示， 在main.js中配置路由规则：
2演示， 在App.vue中给定出口
【路由运作原理】
当浏览器url改变时, 匹配路由表数组中的path值
如果命中了， 则把相应的component渲染到对应的路由出口；否则显示空白
【路由管理】
【路由模块的抽离与封装】
路由配置代码都写在 main.js 中显然不合适, 会让 main.js 代码变得臃肿
因此可以将路由模块抽离出来， 利于管理和维护
1.新建src/router/index.js， 然后把之前写在main.js中的路由代码全部移动到/router/index.js中进行管理， 并导出router实例
2.在main.js中导入router实例， 并注册
【声明式导航与传参】
之前的操作要手动输入地址，才能切换页面，这很麻烦， 接下来的操作可以点击链接进行跳转
vue-router 提供了⼀个全局组件 router-link, 这是声明式导航， 用于点击跳转路由，需添加 to 属性指定路径 , 其本质还是 a 标签
语法：<router-link to="path值"> xxx </router-link>
使用router-link跳转后，vue-router会给当前点击的链接添加两个类名： router-link-exact-active 和 router-link-active ， 这意味着：自带激活的类名 , 可以利用这个激活的类名， 方便地实现高亮样式
以该图为例
router-link-active
模糊匹配， 只要是以/find开头的路径都可以和 to=/find匹配到
router-link-exact-active:
精确匹配， to=/find 仅可以匹配 /find
【声明式导航-传查询参】
可用于在跳转路由时，传递参数
们可以通过两种方式，在跳转的时候把所需要的参数传到其他页面中
1. 查询参数传参 2. 动态路由传参
【查询参数传参】
传递
传字符串语法： <router-link to="/path?参数名=值&参数名=值......"> xxx </router-link>
传对象语法：<router-link :to="{ path: '/path', query: { 参数名: 值 ... } }"> xxx </router-link>
接收
代码示范：（）
即便给to属性传递了一个对象， 最终在显示上还是会变成字符串的格式， 因此无论是传字符串还是对象， 接收的写法都不变
【动态路由传参】
• 配置动态路由
• 动态路由后面的参数可以随便起名，但要有语义
传字符串：
需要路由表的结构和to属性的结构一致， 路由表的“/:fid”是一个参数（前面加上了一个冒号）
接收写法需要靠route.param, 这是接收写法的显著区别
传对象：
【更多配置】
【重定向】
之前的网页打开时, url 默认是 / 路径, 因此未匹配到组件时, 会出现空白
因此可以在匹配 / 后, 强制跳转到指定 路径, 避免页面空白， 这就是重定向
在redirect中填写想要跳转到的路径
但我们不止可以在根路径中进行重定向， 在任何路径中都可以重定向
【404】
当路径找不到匹配时，给出对应的提示页面， 而不是直接显示空白
做法：
1.创建404页面
2.在路由表的末尾， 添加404路由规则
path属性需要为 '/:pathMatch(.*)*'
【路由模式】
路由的路径看起来不好看, 有#, 这是哈希模式， 可以通过history属性切成真正的路径形式
传给history属性createWebHistory()函数即可切换为不带#的模式
【编程式导航与传参】
编程式导航可用于主动做路由跳转（如：登录成功自动跳转至首页）
用JS代码来进行跳转
语法：
1.获取router路由实例
注意， 这里要与之前的route作区分， route仅代表当前激活的路由，用于获取路由参数， 而router代表的是整个路由的实例
2.router.push(字符串 / 对象)
需求： 进入该页面2s后， 自动跳转到 /friend 页面
编程式导航 与 声明式导航 传参和接参方式完全⼀样，既支持字符串, 也支持对象
【嵌套与守卫】
【嵌套】
在一个路由页面中，再进行一套路由的切换
步骤
1. 创建3个二级路由页面组件， 配置二级路由规则中
2. 路由表数组中, 在相应的一级路由规则中, 配置 children 规则
3. 在相应的一级路由页面组件中, 给二级路由出口和导航链接
二级 path 不加 / ; 跳转要写完成路径; 避免空白、要添加重定向
【守卫】
在访问某个路由前， 添加权限判断， 如只有登录了才可以访问
可以让路由(导航)全局前置守卫: 每个路由在跳转前都会触发回调函数
代码示例：
