vue-router 有 3 种路由模式：hash、history、abstract。

1) hash模式：hash + hashChange

特点：

hash虽然在URL中，但不被包括在HTTP请求中

用来指导浏览器动作，对服务端安全无用，hash不会重加载页面

通过监听 hash（#）的变化来执行js代码 从而实现 页面的改变

核心代码：

window.addEventListener(‘hashchange‘,function(){

    self.urlChange()

})

2) history模式：historyApi + popState

HTML5推出的history API，由pushState()记录操作历史，监听popstate事件来监听到状态变更；

因为 只要刷新 这个url（www.ff.ff/jjkj/fdfd/fdf/fd）就会请求服务器，然而服务器上根本没有这个资源，所以就会报404，解决方案就 配置一下服务器端。

说明：

1）hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；

2）history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；

3）abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

了解学习更多web前端先技术知识欢迎关注小编专栏！