什么是路由？
根据不同的url展示不同的页面或者数据。
分类：路由分为前端路由和后端路由。
前端路由：主要用于单页面的开发，根据用户请求的地址来渲染不同的页面。前端路由不会经过后端，而是根据hash值的变化进行页面数据的渲染，所以不刷新，不会跳转。
原理：通过hashRouter（onhashchange）或者history路由（h5 historyAPI）进行页面的切换。
后端路由：根据用户请求的路径返回不同的页面或数据。
routes：
它是路由配置的一些规则，是一个数组，数组中的每一个对象都是一个路由的配置项。
export const router=new VueRouter({
routes:[{},{},{}]
})
<router-link>和<router-view>：
当路由配置成功后，VueRouter会提供2个内置组件用来做组件的显示：
<router-link>：路由组件展示
<router-view>：路由的跳转----to表示跳转到哪里去，tag表示是什么标签
<div id="app">
<router-view></router-view>
<router-link to="/home" tag="li"></router-link>
<router-link to="/list" tag="li"></router-link>
</div>
路由跳转的方式：
1、a标签进行跳转----<a href="#/home">首页</a>
2、router-link进行跳转----<router-link to="/home" tag="li">首页</router-link>
当路由配置成功后，VueRouter会提供2个内置组件来做组件的显示：<router-view></router-view>----路由组件展示 <router-link to="/home" tag="a"></router-link>----路由的跳转（to表示到达的地方，tag表示渲染成什么标签）
3、编程式路由----this.$router.back()----this.$router.push()----这两个最终要
在created函数中this是VueComponent对象，这些方法都是原型中的方法
this.$router.back() 后退
this.$router.forward() 前进---一般不用
this.$router.push() 跳转
this.$router.go() 指定跳转---1表示前景，-1表示后退，0表示刷新
this.$router.replace() 替换
路由传值的方式：
1、动态路由传值
例如：path:"/home/:id/name"; 接受的时候通过 this.$route.params
①定义路由时，通过/:属性/:属性来定义传递的属性
②路由跳转时，通过/值/值将数据传到对应的组件中
③在对应的组件内部通过this.$route.params进行数据的接收
2、query传值。因为在url中？后面的参数不会被解析，因此我们可以通过query进行传值。接收的时候通过 this.$route.query
3、路由解耦。在配置路由的时候添加props属性为true,在需要接受参数的组件页面通过props进行接受
4、编程式导航 this.$router.push({path:"/home",query:{}});
动态路由传值和query传值的区别：（是否需要传递参数）
动态路由中path:"/detail/:id/:name"----前端路由跳转时必须要传递参数，如果没有参数，那么对应的页面不会显示。
query中path:"/detail"----query传值时不需要写参数。
路由配置项常用的属性及作用：
路由配置参数：
mode：hash----默认，地址栏中有#号，不需要后端配置，建议使用；history----地址栏中没有#号，需要后端配置。
path：跳转路径
component：路径相对于的组件
name：命名路由----在path:"/home"后面加一个name:"home"，用于动态路由传值时以对象的形式传值
meta：路由元信息
children：子路由的配置参数（路由嵌套）
props：路由解耦----在配置项中增加props:true
redirect：重定向路由
编程式导航使用的方法以及常用的方法：
路由跳转：this.$router.push()
路由替换：this.$router.replace()
后退：this.$router.back()
前进：this.$router.forward()
指定跳转：this.$router.go()
如何重定向路由？
配置路由中的redirect进行重定向
如何实现路由解耦？
在路由的配置项中设置props:true，在需要接受组件的内部通过props进行接受
$router和$toute的区别：
$route：当前路由的信息，fullPath、hash、matched、meta、params、path、query
$router：路由的实例对象，具有一些需要的方法，如编程式导航的跳转
路由守卫：
路由钩子函数，路由跳转前的一些验证。
全局守卫：beforeEach----实例VueRouter的方法，在index.js中用router调用。（局部守卫在各个页面中写在export default{ }中）
router.beforeEach((to,from,next)=>{
document.title=to.meta.title;
if(to.path!="/login" && to.meta.auth){
if(sessionStorage.getItem("token")){
next();
}else{
next("/login");
}
}else{
next();
}
});
局部守卫：
beforeRouteEnter：进入路由前的守卫，当前路由的钩子函数中访问不到this。
场景：登录验证、热力图、权限校验、消息通知
beforeRouteEnter(to,from,next){
//这里无法获取this
//to---去哪里 from---从哪里来 next()---跳转
next("/login");
next((vw)=>{//vw---VueComponent对象
});
}
beforeRouteUpdate：路由更新时的守卫，当路由发生改变时，而当前组件没有经历创建和销毁时就需要用到beforeRouteUpdate。
//当点击orderdetail页面的水果切换时，地址栏更新而页面不更新，解决：
beforeRouteUpdate(to,from,next){
this.id=to.params.id;
this.name=to.params.name;
next();
}
除此之外，watch监听$route的变化也能达到同样的效果。
watch: {
"$route"(to,from){
this.id=to.params.id;
this.name=to.params.name;
}
}
beforeRouteLeave：路由离开时的守卫
场景：未支付、未保存、答题系统、退出登录
beforeRouteLeave(to,from,next){
let flag=confirm("确定要离开吗？");
if(flag) next();
}
路由懒加载：
1、异步组件的方式
2、ES6的import的方式