vue路由

实现单页面应用的视图切换方式(页面跳转)

单页面应用（SPA）：
只有一个html页面的应用，所有的页面切换都是通过js完成，
有点：相应速度快，切换可以添加动画，
缺点：初次加载内容多（慢），不利于SEO优化。
多页面（MPA）：
优点：对搜索引擎友好，开发难度较低，
缺点：资源请求较多，整页刷新体验较差，页面间传递数据只能依赖 URL，cookie ， storage 等方式，较为局限。

但应用的特点

1，js可以控制url的改变，并且不会刷新（不会向服务端请求额）
2，可以保留浏览记录
3，可以得到改变后的监听

vue中如何使用路由

在vue路由时单独出来的一个插件vue-router，使用vue-router可以配置vue中的路由，使用方法就是，引入vue-router，注册vue-router，实例化router实例，在实例化router实例的时候可以去做路由相关配置，把实例化后的router实例挂在到vue跟实例的router属性上

vue-router插件主要是扩展可vue全局，全局组件（router-view 路由渲染， router-link 路由跳转，￥route属性获取当前匹配的路由信息）

在路由配置的时候主要是
1.路由模式 mode （history,hash）两种模式
2.路由规则配置 routes是一个数组，数组的每一项都是一个规则，每一个规则都是一个对象，对象中主要的属性就是path，compnent，meta。而且路由可以做路由嵌套，对应在children属性，配置规则一样

在路由中为了方便路由的操作，vue还提供了路由拦截，路由传参等，提供了 $router可以获取路由实例，提供$ router获取路由信息

$router和$ route的关系，以及区别

$router是路由信息对象，可以控制路由的跳转，传参数等\$ route是路由信息对象，是当前页面匹配的路由信息
$route和$ router的关系局势 $router是$ router.currebtRoute是一个指针 $router ===$ router.currentRoute

history和hash的区别

区别就在与实现单页面路由的方法不一样，history是利用html新增的history Api 提供的pathState ，replactState，popState实现的，而hash是利用锚点跳转+hashchange事件实现的

vue 中路由嵌套的配置

在每一个路由规则中都有一个children属性，值是一个数组，数组中的每一项都是一个子路由，除了路由的规则配置以外，还需要在对象父页面中有route-view用来渲染子路由，在配置子路由path的时候 "/path"和"path"在访问的时候是有区别的
比如父路由的path是 '/parent',
如果子路由配置为 '/path'，那么访问子路由的时候就是 /path，
如果子路由配置为 'path'，那么访问子路由的时候就是 /parent/path

vue 中路由的传参方式

1.params 动态路由
在配置路由的时候需要将地址配置为 /xxx/：id /xxx/：name/xxx /xxx/：id（\d+）
特殊包含在路由路径之中，必须要传递的参数，如果没有那么页面并不会渲染（匹配不会成功），传递必传参数，而且不能包含/ . 等符号，传递简单值，传递必传参数，在对应页面使用 $route.params获取\ 2.query\ 包含在路由路径之后？名字=值&名字=值的形式传递，不会影响路由的加载，所以可以用来传递非必传参数，在对应页面使用$ route.query获取
3.props
在配置路由的时候props选项，props传递的参数会被扩展到对应路由组件的props上面去，不会显示在路由路径上，隐藏参数，但是当页面强制刷新参数会丢失

还有就是本地存储，自定义事件等等等

路由拦截（导航守卫）

在vue-router中路由拦截分为全局，单个组件，组件
全局的有 beforEach afterEach 跳转前和跳转完成后
在beforEach中接受3个参数 to，from ，next to和from是是路由信息 next是去哪里（控制路由的跳转），不执行next路由不会跳转
afterEach中接受2个参数 to ，from
利用全局的导航首位可以实现登陆拦截，title改变，页面加载进度等功能
单个路由独享，针对某个路由做拦截在路由配置的时候有个beforeEnter配置项
组件内的守卫

VUE路由