Detailed explanation of the solution to the problem of filling in the vue pit. Some browsers do not support the pushState method

When the front-end uses vue-router to do single-page routing and enable history mode, you will encounter a problem: some lower versions of mobile browsers, some apps, and IE9 browsers do not support the pushState method, the page cannot be loaded. The idea to solve this problem is:

• When the browser supports pushState method, turn on history mode, if not supported, turn on hash mode
• Make judgments on the link. When the jumped link does not match the routing pattern, jump to the correct link.
• Nginx rewrites the path access to the domain name to

The following are the specific implementation methods:

Determine which routing mode to use

let isHans = typeof () === 'function';
let mode = isHans?'history':'hash';

Judgment request link

Every time you enter the route, if you judge that the link requesting the link does not match the routing pattern, you will jump to the correct link.

(async (to, from, next) => {
  let toPath = ,host = '';
  let url = host + toPath;
  let reUrl = url;
  if(isHans && (`${host}/#/`) >-1){
    reUrl = (`${host}/#/`,`${host}/car-insurance/`);
  }
  if(!isHans && (`${host}/#/`) === -1){
    reUrl = (`${host}/car-insurance/`,`${host}/#/`);
    reUrl = (`${host}/`,`${host}/#/`);
  }
  if(reUrl !== url){
    (reUrl);
    return
  }

Configure nginx

server {
  listen 80;
  listen 443;
  server_name ;
  root /data/html;
  index   ;

  access_log off ;
  set $isIndex 1;
  ##Judge IE6-8  if ($http_user_agent ~* "MSIE [6-8].[0-9]") {
    rewrite .* /static/ break;
  }

  if ( $request_uri ~* "/(|||jd_root.txt)$" ) {
   #Don't jump to    set $isIndex 0;
  }
  if ( $request_uri ~* "/static/" ) {
   #Don't jump to    set $isIndex 0;
  }

  if ($isIndex = 1 ){
      set $inIndexJS 0;
      rewrite .* /;
      break;
   }
}a

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.