vue填坑之解決部分瀏覽器不支援pushState方法

前端使用vue-router做單頁面路由並開啟history模式時，會碰到一個問題：部分低版本的手機瀏覽器、部分app以及IE9瀏覽器由於不支援pushState方法，會導致頁面載入不出來。
解決這個問題的思路是：
1. 當瀏覽器支援pushState方法時，開啟history模式，不支援則開啟hash模式
2. 對連結做判斷，當跳轉的連結與路由模式不匹配時，則跳轉至正確的連結
3. nginx對域名下的路徑訪問均重寫向至index.html

以下為具體實現方法：

判斷使用何種路由模式

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

判斷請求連結

每次進入路由時，判斷請求連結跳轉的連結與路由模式不匹配時，則跳轉至正確的連結

router.beforeEach(async (to, from, next) => {
    let toPath = to.fullPath,host = 'http://abc.cn';
    let url = host + toPath;
    let reUrl = url;
    if(isHans && url.indexOf(`${host}/#/`) >-1){
        reUrl = url.replace(`${host}/#/`,`${host}/car-insurance/`);
    }
    if(!isHans && url.indexOf(`${host}/#/`) === -1){
        reUrl = url.replace(`${host}/car-insurance/`,`${host}/#/`);
        reUrl = reUrl.replace(`${host}/`,`${host}/#/`);
    }
    if(reUrl !== url){
        window.location.replace(reUrl);
        return
    }

配置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;

    ##判斷IE6-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)$" ) {
      #不跳轉到index.html
       set $isIndex 0;
    }
    if ( $request_uri ~* "/static/" ) {
      #不跳轉到index.html
       set $isIndex 0;
    }

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

閱讀原文