面试题系列---【vue-router是什么？有哪些路由模式？实现原理是什么】

vue-router是什么？有哪些路由模式？

1.vue-router是什么

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。

2.路由模式

vue-router有3种路由模式：hash，history，adstract.默认是hash，

1.切换路由模式

我们可以用如下代码修改成history模式：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main'
Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Main
    }
  ]
})

2.hash模式

原理: 在 url 中的 # 之后对应的是 hash 值, 其原理是通过hashChange() 事件监听hash值的变化, 根据路由表对应的hash值来判断加载对应的路由加载对应的组件
优点:
(1) 只需要前端配置路由表, 不需要后端的参与
(2) 兼容性好, 浏览器都能支持
(3) hash值改变不会向后端发送请求, 完全属于前端路由
缺点:
(1) hash值前面需要加#, 不符合url规范,也不美观

window.onhashchange = function(event){
    console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1);
    document.body.style.color = hash;
}

　　上面的代码可以通过改变hash来改变页面字体颜色，虽然没什么用，但是一定程度上说明了原理。

3.history

原理：history API 是 H5 提供的新特性，允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求(将url替换并且不刷新页面)

优点:
(1) 符合url地址规范, 不需要#, 使用起来比较美观
缺点:
(1) 在用户手动输入地址或刷新页面时会发起url请求, 后端需要配置index.html页面用户匹配不到静态资源的情况, 否则会出现404错误
(2) 兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持.

只能改变#后面的url片段，history api可以分为两大部分：切换和修改

（1）切换历史状态

　　包括back、forward、go三个方法，对应浏览器的前进，后退，跳转操作

history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

（2）修改历史状态

　　包括了pushState、replaceState两个方法，这两个方法接收三个参数：stateObj，title，url