vue history路由模式刷新404的问题

简介

  vue下默认的路由模式是hash，但是在域名与路径位置及参数拼接处会出现的符号#，为了让url看起来更美观或者其他原因我们也可以将hash换成history，但history模式下我们需要注意的是在我们强刷新或回退的时候页面会出现404的问题

原因

  当我们进入页面的时候会向服务器发送我们即将进入的页面路由,但vue项目是单页面应用(大多数)，我们真正的页面只有一个,即index.html。所以我们发送到服务器的路由路径就会匹配不到，服务器便会向我们返回404，进而使得我们的页面进入404.
  为什么hash模式下不会？原因就在于hash模式下显示并不美观的符号#，服务器不会去识别#后面的内容，也就不会使得路由路径匹配失败了。同样不会404的情况会发生在history模式下的项目开发过程中以及通过代码进行页面跳转的时候。

解决

  通过在服务器配置相关代码即可，以Nginx为例

location / {
  try_files $uri $uri/ /index.html;
        }

具体的看后端及项目情况，它的作用在于当服务器接受的url匹配不到时，便返回到我们的index.html页面，因此就不会进入404页面了。
  需要注意的是此时就算是真正404的请求也不会显示404了，所以有需要的可以在router.js内进行类似实例配置

  mode: 'history',			
  routes: [
    {
      path: '/pub',
      component:Empty
    },
    {
      path: '*',			//其他路由显示404
      component: NotFound,
    }
  ]
})

题外话

  遇到这个情况是在公司之前的项目上，为了不去麻烦后端在服务器配置Nginx，一开始是打算直接将项目改成hash模式的，但是该外后发现又有其他的问题，搞了半天发现是因为项目是运行在微信里，而微信有个恶心的问题是它将url内所有非?和&这两种之外的特殊符号过滤了,就导致vuehash下路url内的#不能发挥它的作用，最后还是避免麻烦放弃了