当我们使用Vue开发SPA（单页面应用）的时候，需要引入前端路由系统（vue-router）。vue-router是vue.js官方提供的路由插件，它和vue.js是深度集成的。前端路由的核心，就在于 ——** 改变视图的同时不会向后端发出请求。** 在Vue单页面应用中页面切换其实就是组件的切换，vue-router的作用在于将路径和组件联系起来，使得通过不同的路径可以访问到不同的组件。在传统的页面中，我们切换页面是通过a标签来实现，每一次页面切换都需要向后台发送请求。
在使用Vue-router时候路由模式默认是hash; hash模式的url中永远带着#号，它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。说到这里就不得不说一下前端路由的原理：window是可以监听到哈希值的变化的（onhashchage事件），这就意味着：当url中的哈希值发生了变化，无需发起http请求，window也可以监听到这种变化，并按需加载前端的代码块。哈希模式也是当下单页面应用的标配,所谓前端路由的强大之处也就在这里：路由分发不需要服务器来做，前端自己就可以完成。
历史模式（history mode） history模式利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。
hash模式的#可能会使人认为不太美观，于是选用了history,history相对于hash来说符合URL标准格式，但是history模式有一个很大的坑：刷新404
1、hash 模式下刷新会请求后台，但是url中只包含#之前的部分，后台是存在对应了路由的，不会404，页面正常。
2、history 模式下刷新请求后台，此时的url是所有的url，包含get参数，如：http://www.baidu.com/detail/id，当后台中缺少对 /detail/id将返回 404 错误。history需要后台支持。
1.apache开启rewrite模块 **具体做法：**找到apache环境下的httpd.conf文件，搜索LoadModule rewrite_module modules/mod_rewrite.so（搜索不到可以是空格，搜索一部分只要能找到就行），去掉前面的“#”号。
注：LoadModule rewrite_module modules/mod_rewrite.so 如果找不到，请在httpd.conf添加
2.虚拟主机配置Allowoverride为all **具体做法：**最好把httpd.conf里面的所有AllowOverride none 修改为all
3、.htaccess
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d // 注意：这个目录是你设置存放vue上线文件的目录，如说我vue文件放在了根目录下的dist文件夹中，这样可写为/dist/index.html RewriteRule . /dist/index.html [L] </IfModule>在网站根目录添加.htaccess 文件，并把以上代码添加进去, 保存
4.重启Apache
