首页 > 其他分享 >vue填坑之解决部分浏览器不支持pushState方法

vue填坑之解决部分浏览器不支持pushState方法

时间:2023-06-15 14:23:22浏览次数:39  
标签:vue 浏览器 url reUrl 填坑 host let 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
    }

 

标签:vue,浏览器,url,reUrl,填坑,host,let,pushState
From: https://www.cnblogs.com/porter/p/17482750.html

相关文章

  • 使用vue ui创建vue项目
    vueui是什么?简单来说,vueui是一个可视化图形界面,方便你去创建、更新和管理vue项目,包括下载router,vuex,axios,elementui等插件,配置好一些属性以及依赖关系,方便我们使用,我个人第一次接触它就感觉非常非常非常智能和强大配置步骤  1、安装VueCLI,因为vueui是在VueCLI基础上封......
  • vue3错误归纳
    1,出错原因,找不到文件npminstall--save@/api/baseInfo/department//这个目录没有文件 2.packjson中那么没改,不知道为什么E:\gh-phm\ruoyi-ui\node_modules\normalize-package-data\lib\fixer.js:336thrownewError("Invalidname:"+JSON.stringify......
  • VUE使用Element-ui表达式拼接字符串 el-table-column的prop拼接字符串 拼接table 使
    VUE使用Element-ui表达式拼接字符串el-table-column的prop拼接字符串使用<templateslot-scope="scope">更改td里面值https://blog.csdn.net/WindNolose/article/details/125422409描述VUE中的标签属性,可以在属性前使用:,让属性绑定到data中的动态数据el-table-column标......
  • vue-router实现SPA购物APP基本功能
    概述vue-router是vue中的一个核心插件,用它来实现SPA购物APP基本功能详细vue-router是vue中的一个核心插件。一、安装1.如果安装脚手架,那么可以npminstallvue-router即可安装然后导入并且引用就可以了。importVueRouterfrom'vue-router'Vue.use(VueRouter)......
  • vue图片懒加载vue-lazyload
    1.安装vue-lazyloadnpmivue-lazyload2.在main.js中引入使用import{createApp}from'vue'import'./style.css'importAppfrom'./App.vue'importVueLazyloadfrom'vue-lazyload'//引入importImgFailfrom"@/assets/......
  • 前端vue仿京东天猫简单好用的瀑布流瀑布流式布局列表组件waterfall
    前端vue仿京东天猫简单好用的瀑布流瀑布流式布局列表组件waterfall,下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13046效果图如下:使用方法<!--proList:条目数组数据goProDetail:条目点击事件跳转(实现了点击条目数据传值)--><ccWaterLis......
  • 介绍vue3的钩子函数activated和deactivated使用场景
    activated和deactivated是Vue3中的两个生命周期钩子函数。activated钩子函数在组件被激活时调用,通常用于恢复组件的状态或执行一些初始化操作。例如,如果一个组件被从路由中激活,你可能需要在该组件被激活时从本地存储中加载一些数据。下面是一个示例代码:<template><div>......
  • vue-cli-演示如何基于vue-cli创建vue项目
    1.安装和使用vue-cli是npm上的一个全局包,使用npminstall命令,即可方便的把它安装到自己的电脑上:npminstall-g@vue/cli基于vue-cli快速生成工程化的Vue项目:vuecreate项目的名称......
  • Vue自定义校验
    age:[{required:true,message:'请输入年龄',trigger:'blur'},{validator:(rule,value,callback)=>{if(value>=18){callback();}else{callback(newError("教练年龄必须大于18周岁"));}}......
  • vue-cli-介绍并安装vue-cli
    1.什么是vue-clivue-cli是Vue.js开发的标准工具。它简化了程序员基于webpack创建工程化的Vue项目的过程。2.安装和使用vue-cli是npm上的一个全局包,使用npminstall命令,即可方便的把它安装到自己的电脑上:npminstall-g@vue/cli......