vue-router

一、vue-router路由原理？

通过改变 URL，在不重新请求页面的情况下，更新页面视图。

二、两种路由模式

1.hash模式
在浏览器中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取；
特点：
hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，
hash不会重加载页面。
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

2、history模式
history采用HTML5的新特性；且提供了两个新方法：pushState()和replaceState(瑞不类 四得特)可以对浏览器历史记录栈进行修改，以及popState事件监听到状态变更。
特点:
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致。

三、路由跳转方式

第一种跳转方式：编程式导航

{path: '/news', component: BYNews},
this.$router.push({path:'news'});
带参：
{path: '/newDetail/:aid', component: BYNewDetail},
this.$router.push({path:'/newDetail/495'});

第二种跳转方式：命名路由

{path: '/news', component: BYNews,name:'news'},
    this.$router.push({name:'news'});
    带参：
    this.$router.push({name:'news',params:{userId:123}});

四、路由传参

三种： 分别是query，params，动态路由传参

接收： 通过query方式传递过来的参数一般是通过this.$route.query接收 
通过params方式传递过来的参数一般是通过this.$route.params接收 
通过动态路由传参方式传递过来的参数一般是通过this.$route.params接收

区别：

query使用path和name传参跳转都可以，而params只能使用name传参跳转。 
传参跳转页面时，query不需要再路由上配参数就能在新的页面获取到参数，params也可以不用配，但是params不在路由配参数的话，当用户刷新当前页面的时候，参数就会消失。 
也就是说使用params不在路由配参数跳转，只有第一次进入页面参数有效，刷新页面参数就会消失。 

五、路由守卫

路由守卫分为三种：
1.全局路由守卫：无论跳转哪个页面都会触发钩子函数

router.beforeEach 进入路由之前
router.beforeResolve 全局解析守卫(2.5.0+)在beforeRouteEnter调用之后调用
router.afterEach 进入路由之后

2.组件级路由守卫：直到跳转该组件才会触发钩子函数

beforeRouteEnter 路由跳转进入之前
beforeRouteUpdate(2.2新增) 页面参数更新时触发
beforeRouteLeave 离开这个路由触发

3.单个路由守卫：只有访问到这个路径，才能触发钩子函数
beforeEnter只有访问到这个路径，才能触发钩子函数

路由守卫钩子函数里面的三个参数分别是to,from,next ：

to和from是将要进入和将要离开的路由对象,路由对象指的是平时通过this.$route获取到的路由对象。
next:Function 这个参数是个函数，且必须调用，否则不能进入路由(页面空白)。
next() 进入该路由。
next(false): 取消进入路由，url地址重置为from路由地址(也就是将要离开的路由地址)。
next 跳转新路由，当前的导航被中断，重新开始一个新的导航。