1. hash和history模式的区别


hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。

如果用户考虑url的规范，需要推广宣传，或者开发的h5需要放在第三方的app里，有的app里面url是不允许带有#号的，需要将#号去除，那么就要使用history模式

前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。

现代前端开发中最流行的页面模型，莫过于SPA单页应用架构。单页面应用指的是应用只有一个主页面，通过动态替换DOM内容并同步修改url地址，来模拟多页应用的效果，切换页面的功能直接由前台脚本来完成，而不是由后端渲染完毕后前端只负责显示。前端三驾马车Angular,Vue,React均基于此模型来运行的。SPA能够以模拟多页面应用的效果，归功于其前端路由机制。

前端不同页面的状态管理器,可以不向后台发送请求而直接通过前端技术实现多个页面的效果。angularjs中的 ui-router,vue中的 vue-router,以及react的 react-router均是对这种功能的具体实现。

既然前端路由这么牛逼，那必须的好好研究一下。

为了达到这一目的，浏览器当前提供了以下两种支持：

  • hash —— 即地址栏 URL 中的 # 符号。比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
  • history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。

但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，主要是由于在生产环境下，如果没有配置nginx的话，服务器只能识别 域名根目录的html文件，那么就需要和后端人配合让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上就ok啦，不过会出现覆盖问题

需要这么配置下



const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})



注意：hash模式下#后面的和history模式下根域名一下的，都是用通过动态替换DOM内容并同步修改url地址的