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