1、vue-router路由有几种模式？说说它们的区别？
在vue的路由配置中有mode选项，可以设置为hash和history两种模式。
1）hash模式
可以通过window.location.hash来改变当前页面的hash值。通过hash改变了url，会触发hashchange事件，只要监听hashchange事件，就能捕获到通过hash改变url的行为。有了监听事件，且改变hash页面不刷新，这样我们就可以在监听事件的回调函数中，执行我们展示和隐藏不同UI显示的功能，从而实现前端路由。
a、URL路径会出现“#”号字符；
b、hash值不包括在Http请求中，它是交由前端路由处理，所以改变hash值时不会刷新页面，也不会向服务器发送请求；
c、hash值的改变会触发hashchange事件。
d、hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了
2）history模式
使用HTML5的History 对象的pushState() 和 replaceState() 方法来完成 URL 跳转而无须重新加载页面。不过这种模式还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，就需要前端自己配置404页面。
a、整个地址重新加载，可以保存历史记录，方便前进后退
b、依赖H5 API和后台配置，没有后台配置的话，页面刷新时会出现404。
window.history属性指向 History 对象，它表示当前窗口的浏览历史。不支持老旧浏览器。
History 对象主要有两个属性
History.length：当前窗口访问过的网址数量（包括当前网页）。
History.state：History 堆栈最上层的状态值。
History 对象主要方法
History.back()：移动到上一个网址，等同于点击浏览器的后退键。对于第一个访问的网址，该方法无效果。
History.forward()：移动到下一个网址，等同于点击浏览器的前进键。对于最后一个访问的网址，该方法无效果。
History.go()：接受一个整数作为参数，以当前网址为基准，移动到参数指定的网址，比如go(1)相当于forward()，go(-1)相当于back()。如果参数超过实际存在的网址范围，该方法无效果；如果不指定参数，默认参数为0，相当于刷新当前页面。
注意，移动到以前访问过的页面时，页面通常是从浏览器缓存之中加载，而不是重新要求服务器发送新的网页。
History.pushState()：用于在历史中添加一条记录。
该方法接受三个参数，依次为：
state：一个与添加的记录相关联的状态对象，主要用于popstate事件。该事件触发时，该对象会传入回调函数。也就是说，浏览器会将这个对象序列化以后保留在本地，重新载入这个页面的时候，可以拿到这个对象。如果不需要这个对象，此处可以填null。
title：新页面的标题。但是，现在所有浏览器都忽视这个参数，所以这里可以填空字符串。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。如果pushState()方法设置了一个跨域网址，则会报错。
示例：假定当前网址是example.com/1.html，使用pushState()方法在浏览记录（History 对象）中添加一个新记录。
添加新记录后，浏览器地址栏立刻显示example.com/2.html，但并不会跳转到2.html，甚至也不会检查2.html是否存在，它只是成为浏览历史中的最新记录。这时，在地址栏输入一个新的地址(比如访问google.com)，然后点击了倒退按钮，页面的 URL 将显示2.html；你再点击一次倒退按钮，URL 将显示1.html。
总之，pushState()方法不会触发页面刷新，只是导致 History 对象发生变化，地址栏会有反应。使用该方法之后，就可以用History.state属性读出状态对象。
History.replaceState()方法：用来修改 History 对象的当前记录，其他都与pushState()方法一模一样。
假定当前网页是example.com/example.html。
pushState() 和 replaceState()这两个方法的作用就是可以将url替换并且不刷新页面，好比挂羊头卖狗肉，http并没有去请求服务器该路径下的资源，一旦刷新就会暴露这个实际不存在的“羊头”，显示404（因为浏览器一旦刷新，就是去真正请求服务器资源）
那么如何去解决history模式下刷新报404的弊端呢，这就需要服务器端做点手脚，将不存在的路径请求重定向到入口文件（index.html）
popstate 事件
pushState方法、replaceState方法，只能导致history对象发生变化，从而改变当前地址栏的 URL，但浏览器不会向后端发送请求，也不会触发popstate事件的执行
只有用户点击浏览器倒退按钮和前进按钮，或者使用 JavaScript 调用History.back()、History.forward()、History.go()方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。
创建一个新的全局事件监听replaceState和pushState行为。
history.pushState() 相比于直接修改 hash，存在以下优势:
a、pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL；
b、pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中；
c、pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串；
d、pushState() 可额外设置 title 属性供后续使用。
2、重定向、别名和配置4040页面
重定向也是通过routes配置来完成。从/a重定向到/b：
重定向的目标也可以是一个命名的路由：
甚至是一个方法，动态返回重定向目标：
“重定向”的意思是，当用户访问/a时，URL 将会被替换成/b，然后匹配路由为/b，那么“别名”又是什么呢？
/a的别名是/b，意味着，当用户访问/b时，URL 会保持为/b，但是路由匹配则为/a，就像用户访问/a一样。
“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。
可以配置path：‘*’实现配置404页面。*代表全匹配 你放在第一个不管地址是什么都会 匹配到了 放在最后一个 前面有的就不会匹配。
3、vue-router中的组件
<router-link>组件支持用户在具有路由功能的应用中 (点击) 导航。通过to属性指定目标地址，默认渲染成带有正确链接的<a>标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名（active-class）。active-class是router-link终端属性，用来做选中样式的切换，当router-link标签被点击时将会应用这个样式。
<router-view>组件是一个 functional 组件，渲染路径匹配到的视图组件。<router-view>渲染的组件还可以内嵌自己的<router-view>，根据嵌套路径，渲染嵌套组件。
如果<router-view>设置了名称name，则会渲染对应的路由配置中components下的相应组件。
它也是个组件，所以可以配合<transition>和<keep-alive>使用。如果两个结合一起用，要确保在内层使用<keep-alive>
<transition>元素作为单个元素/组件的过渡效果。<transition>只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在检测过的组件层级中。Vue只有在插入，更新或者移除DOM元素时才会应用过渡效果。
组件过渡过程中，会有四个CSS类名进行切换，这四个类名与上面transition的name属性有关，比如name="fade"，会有如下四个CSS类名：
a、fade-enter：进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；
b、fade-enter-active：进入过渡的结束状态，元素被插入时就生效，在过渡过程完成之后移除；
c、fade-leave：离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；
d、fade-leave-active：离开过渡的结束状态，元素被删除时生效，离开过渡完成之后被删除
<keep-alive>能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 当组件在<keep-alive>内被切换，它的activated和deactivated这两个生命周期钩子函数将会被对应执行。
4、vue-router 传参
1）Params
只能使用name，不能使用path，参数不会显示在路径上，浏览器强制刷新参数会被清空。
2）Query
参数会显示在路径上，刷新不会被清空，name 可以使用path路径。
5、vue-router有哪几种导航钩子（导航守卫）？
vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
1）全局前置守卫
当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。
每个守卫方法接收三个参数：
to: Route: 即将要进入的目标路由对象。
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。
a、next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed(确认的)。
b、next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到from路由对应的地址。
c、next('/')或者next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向next传递任意位置对象，且允许设置诸如replace: true、name: 'home'之类的选项以及任何用在router-link的toprop或router.push中的选项。
d、next(error): (2.4.0+) 如果传入next的参数是一个Error实例，则导航会被终止且该错误会被传递给router.onError()注册过的回调。
确保next函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错。
2）全局解析守卫
可以用router.beforeResolve注册一个全局守卫。这和router.beforeEach类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
3）全局后置钩子
你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受next函数也不会改变导航本身。
4）路由独享的守卫
在路由配置上直接定义beforeEnter守卫。
5）组件内的守卫
你可以在路由组件内直接定义以下路由导航守卫：
a、beforeRouteEnter
b、beforeRouteUpdate(2.2 新增)
c、beforeRouteLeave
6）完整的导航解析流程
a、导航被触发。在失活的组件里调用beforeRouteLeave守卫。
b、全局守卫（大哥）调用全局的beforeEach守卫。组件内的守卫（三弟）在重用的组件里调用beforeRouteUpdate守卫 (2.2+)。
c、路由守卫（二哥）在路由配置里调用beforeEnter，开始解析异步路由组件。
d、在被激活的目标组件里调用beforeRouteEnter。
e、全局守卫（大哥）调用全局的beforeResolve守卫 (2.5+)检测到目标组件。导航被确认。调用全局的afterEach钩子。触发 DOM 更新。
f、路由守卫（二哥）调用beforeRouteEnter守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入。
6、$route和 $router的区别是什么？
router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。
route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。
7、Vue-Router实现
8、懒加载的方式
1）在ES6中,按需加载 import() 方法
2）Vue的异步组件
3）require.ensure
网友评论