欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2018年07月12日 09:44:14   作者：Jiang Xueyang  
這篇文章主要介紹了詳解vue填坑之解決部分瀏覽器不支持pushState方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

前端使用vue-router做單頁面路由并開啟history模式時(shí)，會碰到一個(gè)問題：部分低版本的手機(jī)瀏覽器、部分app以及IE9瀏覽器由于不支持pushState方法，會導(dǎo)致頁面加載不出來。 解決這個(gè)問題的思路是：

  • 當(dāng)瀏覽器支持pushState方法時(shí)，開啟history模式，不支持則開啟hash模式
  • 對鏈接做判斷，當(dāng)跳轉(zhuǎn)的鏈接與路由模式不匹配時(shí)，則跳轉(zhuǎn)至正確的鏈接
  • nginx對域名下的路徑訪問均重寫向至index.html

以下為具體實(shí)現(xiàn)方法：

判斷使用何種路由模式

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

判斷請求鏈接

每次進(jìn)入路由時(shí)，判斷請求鏈接跳轉(zhuǎn)的鏈接與路由模式不匹配時(shí)，則跳轉(zhuǎn)至正確的鏈接

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論