Detailed explanation of VUE fills solution Some browsers do not support pushState methods

The front end uses Vue-Router to do a single page route and enable the History mode, it will encounter a problem: some low version of the mobile browser, some app, and IE9 browser, because the PushState method is not supported, it will cause the page to load . The idea of ​​solving this problem is:

  • When the browser supports the PushState method, open the History mode, not support, open the Hash mode
  • to determine the link, when the jump link When doing matching with routing mode, jump to the correct link
  • Nginx to rewrite the path access under the domain name to index.html

The following is a specific implementation method:

What is the route mode of use

 let ishans = typeof (history.pushstate) === 'function 'History': 'hash';   
Decision Request Link

each time When entering the route, it is jumped to the correct link when it does not match the routing mode, and the routing mode is not matched.

Router.beforeeeach (async (to, from, Next) => {let topath = to.FullPath, host = ‘http://abc.cn’; let url = host + topath; letry = url; if (ishans && url.indexof (`$ {Host} / # / `)> -1) {REURL = Url.replace (` $ {Host} / # / `,`$ {host} / car-insurance /`);} f (! ishans && url.indexof (`$ {host} / # /`) === -1) {REURL = Url.replace (`$ {Host } / car-insurance / `,` $ {host} / # / `); REURL = REURL.REPLACE (` $ {host} / `,` $ {host} / # / `);}} (} = = URL) {WINDOW.LOCATION.Replace (REURL); RETURN}

Configure NGINX
   
Server {Listen 80; Listen 443; Server_name abc.cn; root / data / html; index index.html index.htm index.json; access_log off; set $ isindex 1; ## 判 i6-8 IF ($ http_user_agent ~ * “msie [6-8]. [0-9]”) {REWRITE. * /STATIC/IE8.HTML BREAK;} IF ($ Request_uri ~ * “/(Favicon.ico|Index.js | root.txt | jd_root.txt) $ “) {# 不 不 到 到 $ isindex 0;}}}}} {# {{{到 到 到 到.. ISINDEX 0;} = f ($ ISINDEX = 1) {set $ inindexjs 0; shutrite. * /Dex.html; break;}} a


The above is all of this article Content, I hope to help everyone, and I hope everyone will support Tumi Clouds.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment