1.认识前端路由
路由器主要维护的是一个映射表，每个ip地址对应一个计算器的mac地址
前端映射关系：路径->组件（例如：/home->Home.vue）
（1）后端路由阶段：服务器直接生产渲染好对应的HTML页面，返回给客户端进行展示；
（2）前后端分离阶段：后端提供API，在前端对这些请求回来的资源进行渲染；
（3）S（Single）P（Page）A（Application）开发：组件化开发。
history六种模式改变URL而不刷新页面：
replaceState：替换原来的路径
pushState：使用新的路径
popState：路径的回退
go：向前或向后改变路径
forward：向前改变路径
back：向后改变路径
2.认识vue-router
目前前端流行的三大框架，都有自己的路由实现：
Angular的ngRouter；
React的ReactRouter；
Vue的vue-router。-》官方路由。路由用于设定访问路径，将路径和组件映射起来；在vue-router的单页面中，页面的路径的变化就是组件的切换。
安装Vue Router：npm install router
3.路由的使用步骤
(1)创建路由组件的组件；
(2)配置路由映射：组件与路径映射的routes关系；
(3)通过createRouter创建路由对象，并且传入hash和history模式
(4)使用路由：通过<router-link></router-link>和<router-view></router-view>
在routes中配置了一个映射：
redirect重定向到/home路径下，对默认页面进行渲染，path配置的是根路径：
/ ： {path:'/',redirect:'/home'}
4.路由懒加载(需要时再加载)
这里使用之前提到过的webpack分包知识，而Vue Router默认就支持动态来导入组件：
这是因为component可以传入一个组件，也可以接受一个函数，该函数需要放回一个Promise；
而inport函数就是返回一个Promise。
例如：const routes = [
{path:'/home',component:()=>import('../pages/Home.vue)}
{path:'/abour',component:()=>import('../pages/About.vue)}
]
5.路由的其他属性
name,meta
6.路由的嵌套
什么是路由的嵌套呢？
目前我们匹配的Home，About，User等都属于底层路由，我们在他们之间可以来回进行切换；但是在Home页面本身，也可能会在多个组件之间来回切换：
比如Home中包括Product，Message，它们可以在Home内部来回切换。
这个时候我们就需要使用嵌套路由，在Home中也使用router-view来占位之后需要渲染的组件。
{
path:'/home',
component:()=>import('../pages/Home.vue),
children:[
{
path:'',
redirect:'/home/product' //重定向文件
},
{
path:'product',
component:()=>import('../pages/HomeProduct.vue)'
},
{
path:'message',
component:()=>import('../pages/HomeMessage.vue)'
}
]
}
7.路由的内置组件
（1）router-link
常见属性：to，replace，active-class，tag（4.0以前有，决定渲染元素）
router-link中的v-slot（4.0后，取代tag),可以显示多个元素，更加灵活。
a. to属性：是一个字符串，或者一个对象
b. replace属性：设置该属性，当点击时，会调用route.replace（），而不是route.push（）
c. active-class属性：设置激活a元素后应用的calss，默认是route-link-active
d. exact-active-class属性：链接精准激活时，应用于渲染的class，默认是route-link-exact-active
（2）router-view（占位）
router-view的v-slot：
Component：要渲染的组件
route：解析出的标准化路由对象
8.动态添加路由
const routes=[]
const router=createRouter({routes})
if（管理员）{ //判断权限或用户添加不同的路由
router.addRoute({path:"/order",component:()=>import()}) //动态添加
}
if(){}...
app.use(router;)
9.动态删除路由
方式一：添加一个name相同的路由；
方式二：通过removeRoute方法，传入路由名称；
router.removeRoute（‘路由名称’）
方式三：通过addRoute方法的返回值回调。
const removeRoute=router.addRouter(routeRecord)
removeEoute() //删除路由如果存在的话
10.路由的其他方法补充：
router.hasRoute（）。检查路由是否存在
router.getRoutes（）。获取一个包含所有路由记录的数组
11.路由导航守卫
vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航
全局的前置守卫beforeEach是在导航出发时会被回调的。有两个参数：to和from
let counter=0;
router.beforeEach((to,from)=>{
console.log(`进行了${++counter}次路由跳转`);
return false
})
