快捷導(dǎo)航

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

更新時(shí)間：2018年07月12日 09:44:14 作者：Jiang Xueyang

這篇文章主要介紹了詳解vue填坑之解決部分瀏覽器不支持pushState方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

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

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

判斷使用何種路由模式

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

判斷請(qǐng)求鏈接

每次進(jìn)入路由時(shí)，判斷請(qǐng)求鏈接跳轉(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

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

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目中axios的封裝請(qǐng)求
這篇文章主要介紹了vue項(xiàng)目中axios的封裝請(qǐng)求，axios?是一個(gè)輕量的HTTP客戶端，它基于?XMLHttpRequest?服務(wù)來(lái)執(zhí)行?HTTP?請(qǐng)求，支持豐富的配置，下文更多詳細(xì)資料,需要的朋友可以參考一下
2022-03-03
vue移動(dòng)端彈框組件的實(shí)例
今天小編就為大家分享一篇vue移動(dòng)端彈框組件的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
基于 Vue 的 Electron 項(xiàng)目搭建過(guò)程圖文詳解
這篇文章主要介紹了基于 Vue 的 Electron 項(xiàng)目搭建過(guò)程，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-07-07
vue 自動(dòng)檢測(cè)手機(jī)端響應(yīng)式布局的五種實(shí)現(xiàn)
本文主要介紹了vue自動(dòng)檢測(cè)手機(jī)端響應(yīng)式布局,可以通過(guò)結(jié)合 CSS 媒體查詢(xún)、Vue 的動(dòng)態(tài)數(shù)據(jù)綁定、適當(dāng)?shù)牡谌綆?kù)、PostCSS 插件以及正確的視口設(shè)置實(shí)現(xiàn),感興趣的可以了解一下
2024-07-07
vue2.0 自定義日期時(shí)間過(guò)濾器
本文給大家?guī)?lái)兩種方法實(shí)現(xiàn)vue2.0 自定義日期時(shí)間過(guò)濾器，需要的的朋友參考下吧
2017-06-06
解決vux 中popup 組件Mask 遮罩在最上層的問(wèn)題
這篇文章主要介紹了解決vux 中popup 組件Mask 遮罩在最上層的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
vue用h()函數(shù)創(chuàng)建Vnodes的實(shí)現(xiàn)
Vue提供了一個(gè)h()函數(shù)用于創(chuàng)建vnodes,本文就來(lái)介紹一下vue用h()函數(shù)創(chuàng)建Vnodes的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下
2024-01-01
springboot?vue接口測(cè)試前端模塊樹(shù)和接口列表
這篇文章主要為大家介紹了springboot?vue接口測(cè)試前端模塊樹(shù)和接口列表，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-05-05
Vue數(shù)據(jù)回顯表單無(wú)法編輯的解決方案
這篇文章主要介紹了Vue數(shù)據(jù)回顯表單無(wú)法編輯的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-11-11
Vue中使用flv.js播放視頻的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何在Vue項(xiàng)目中使用flv.js播放視頻,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-04-04