Vue-路由（router）
一、路由
（一）前端路由
每一个路由都是一个对象
（二）路由模式：mode
1、hash路由，会带#号的哈希值（默认）
2、history路由，不会带#号（要有后端支持），只在开发环境有效，在其他环境中，一旦刷新就会找不到，需要设置重定向
（三）路由的常用配置项
1、path：路由请求的路径
2、component：路由匹配成功后需要渲染的组件或页面
3、redirect：重定向
4、children：路由嵌套
5、name：命名路由
6、alias：别名设置
7、props：路由解耦，路由传参的一种方式，针对动态路由
8、meta：路由元信息
（四）路由嵌套
children是一个数组，数组中存放对象，每一个对象都是下一级的路由配置项，配置项的属性与routes中的属性一样
渲染二级页面时会保留一级页面内容，解决办法：1）定位；2）一级覆盖
（五）路由跳转的方式
*<router-view/>内置组件，使组件可以显示
1、<a href="#/home"><a/>
2、<router-link :to="/home"><router-link/>
注：to的路径会与path进行匹配，若成功会通过<router-view>渲染component对应的组件
3、编程式导航（用JS实现）
*this.$router.push()跳转
*this.$router.go()前进、后退、刷新
*this.$router.back()返回
*this.$router.forward()前进
*this.$router.replace()替换（替换浏览记录）
（六）路由传参
1、动态路由传值（刷新页面，params数据会丢失，query会使参数显示在路径上，刷新仍在）
传递：在路由配置项path中传递路由的属性 path:"home/:id/:name"
在传递方的路由跳转元素的to路径中使用"/"或"{name:' ',params:{}}"拼接方式
接收：this.$route.params
在路由配置项中添加"props:true"，接收时通过props:{}，只针对动态路由传值
2、query传值（页面刷新时，数据不会丢失）
传递：路由配置项path中为正常路径，
在传递方的路由跳转元素的to路径中，通过？进行数据的拼接，每个字段之间用&分隔
接收：this.$route.query
注：两者区别：query传值是非必须传值，动态路由传值是必须传值
（七）路由的钩子函数（路由守卫、路由拦截）写在组件中
1、beforeRouteEnter：路由进入前（to，from，next）
在当前钩子函数中是访问不到this的，因为还未进入当前组件所以this为undefined；若要使用this则要在next()中使用回调，回调的第一个参数是组件的实例
使用场景：热力图，登录验证，权限验证，会员VIP验证，验证商品携带信息是否完整
2、beforeRouteUpdate：路由更新时
当路由发生改变时，但当前组件没有经历创建和销毁时，若需要接收路由传递过来的数据时使用
3、beforeRouteLeave：路由离开的时候
应用场景：信息没有填写完成，答题系统，支付，退出登录
（八）全局钩子函数，全局守卫（批量拦截）写在main.js中
1、beforeEach((to,from,next)=>{})：一般情况下用来做一些路由公众部分的验证（登录验证）
2、afterEach((to,from)=>{})：后置守卫，注：无next
3、beforeResolve((to,from,next)=>{})：解析守卫，在进入之后离开之前，当某一个组件单独需要验证使用
（九）二级页面内容不随一级页面的操作变化，解决方案：
1、使用beforeRouteUpdate（to，from，next）{}
2、watch：{"$route"(to,from){}}监听
3、路由传值时使用props接收
（十）单页面开发缺点/首屏加载慢或白屏如何解决？
1、方式一：路由懒加载
*ES6引入方式：component:()=>import "组件路径"
*异步组件：component:(resolve)=>require(["组件路径"],resolve);
2、方式二：ssr渲染
服务端渲染：nuxt
