1. 路由
是什么：对应关系（Hash地址与组件之间的对应关系）
2. SPA与前端路由
3.前端路由的工作方式
（1）用户点击页面上的路由链接
（2）导致URL地址栏中的Hash值发生变化
（3）前端路由监听到了Hash地址的变化
（4）前端路由把当前Hash地址对应的组件渲染到浏览器中
vue-router的基本用法
1.什么时vue-router
vue-router时vue.js官方给出的路由解决方法。它只能结合vue项目进行使用，能够轻松管理SPA项目中的组件切换
官方文档地址：https://router.vuejs.org/zh/
（1）安装vue-router包
输入命令：npm i vue-router@3.5.2 -S
（2）创建路由模块
在src根路径下新建router文件夹在里面新建index.js文件作为我们的路由模块
在index.js文件中进行以下配置
（3）导入并挂载路由模块
（4）声明路由链接和占位符
在路由模块中进行声明
当安装和配置了vue-router后，就可以使用router-link来代替a链接了
路由重定向：
指的是用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面。通过路由规则的redirect属性，指定一个新的路由地址，可以很方便的设置路由的重定向
嵌套路由：
通过路由实现组件的嵌套展示，叫做嵌套路由
通过children声明子路由规则
默认子路由
如果children数组中，某个路由规则的path值为空字符串，则这条路由规则叫做默认子路由
动态路由匹配 ：把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性
在vue-router中使用引文的冒号来定义路由的参数
可以为路由规则开启props传参，从而方便的拿到动态参数的值
声明式导航&编程式导航跳转
在浏览中，点击链接实现导航的方式，叫做声明式导航。例如：
普通网页中点击<a>链接、vue项目中点击<router-link>都属于声明式导航
在浏览器中，条用API方法实现导航的方式，叫做编程式导航。例如：
普通网页中调用location.href跳转到新页面的方式，属于编程式导航
vue-router中的编程式导航API
vue-router提供了许多编程式导航的API，其中最常用的导航API分别是:
(1) this.$router.push('hash地址')
跳转到指定hash地址，并增加一条历史记录
（2）this.$router.replace('hash地址')
跳转到指定hash地址，并替换到当前的历史记录
（3）this.$router.go（数值 n）
可以在浏览历史中前进和后退
$router.go简化写法
（1） $router.back() 在历史记录中，后退到上一个页面
（2） $router.forward() 在历史纪录中，前进到下一个页面
导航守卫：可以控制路由的访问权限
全局前置守卫
每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫，程序员可以对每个路由进行访问权限的控制
守卫方法的三个全参
to：to是将要访问的路由的信息对象
from：from是将要离开的路由的信息对象
next：next是一个函数，调用next()表示放行，允许这次路由导航
next函数的3种调用方式
（1）当前用户拥有后台主页的访问权限，直接放行：next()
（2）当前用户没有后台主页的访问权限，强制其跳转到登入页面：next('login')
（3）当前用户没有后台主页的访问权限，不允许跳转到后台主页：next(false)
