history和hash模式区别

路由模式设置

修改路由在地址栏的模式
router/index.js中:

const router = new VueRouter({
  routes,
  mode: "history" // 打包上线后需要后台支持
})

history和hash模式区别：

1. 它们都实现页面的跳转功能（跳转页面）
2. 它们的区别体现在3个方面:
   a.外观 : history模式的path路径不带#号，hash有#号
   b.原理 : hash模式使用onhashchange , history使用pushState , 导致有兼容性差异。hash模式兼容性好(对浏览器的兼容性好,onhashchange) , history的兼容性比hash模式差一些 (底层使用的API是html5的API :pushState ,对浏览器有一定要求)
   c.项目上线后有区别。history开发的项目,在打包上线之后,需要后端配置来支持,不然就会出现404页面。官网上有介绍
3. 我在开发中,没有特殊的要求,一般就用hash(默认值)。如果要修改模式,就改mode:“history”
4. 为啥会有404页面?
   a.history访问这个地址时 , http://www.xxx.com/find , 后端收到的req.url 是/find , 但是我们是单页面应用程序 , 我们只有一个资源是index.html ,没有资源叫/find , 所以就会报404
   b.hash访问这个地址时 , http://www.xxx.com/#/find , 后端收到的req.url 是/ , 有一个资源是index.html ,能正常显示