vue-router在ie9及以下history模式支持

参考:

  https://www.npmjs.com/package/vue-route

  https://github.com/devote/HTML5-History-API

提要:

  ie9及以下不支持html5 history新特性

解决:

  • npm install html5-history-api
  • <!--[if lte IE 9]><script src=“path_to_history.js"></script><![endif]-->
    • issus

      • history.js - IE8+ and other browsers

        history.ielte7.js - IE6+ and other browsers          

      • 使用webpack时

         1  1 var supportsPushState = inBrowser && (function () {
         2  2   var ua = window.navigator.userAgent;
         3  3
         4  4   if (
         5  5     (ua.indexOf(‘Android 2.‘) !== -1 || ua.indexOf(‘Android 4.0‘) !== -1) &&
         6  6     ua.indexOf(‘Mobile Safari‘) !== -1 &&
         7  7     ua.indexOf(‘Chrome‘) === -1 &&
         8  8     ua.indexOf(‘Windows Phone‘) === -1
         9  9   ) {
        10 10     return false
        11 11   }
        12 12
        13 13   return window.history && ‘pushState‘ in window.history
        14 14 })();

        这里supportsPushState在加载时已经被定义,就算在之后的 1 require(‘html5-history-api‘) 也是没有意义的,缓存虽然是王道可有时用不好真的是个坑。。。。

         1 var VueRouter = function VueRouter (options) {
         2   if ( options === void 0 ) options = {};
         3
         4   this.app = null;
         5   this.apps = [];
         6   this.options = options;
         7   this.beforeHooks = [];
         8   this.resolveHooks = [];
         9   this.afterHooks = [];
        10   this.matcher = createMatcher(options.routes || [], this);
        11
        12   var mode = options.mode || ‘hash‘;
        13   this.fallback = mode === ‘history‘ && !supportsPushState && options.fallback !== false; //这里直接使用了定义好的supportsPushState
        14
        15   if (this.fallback) { //最终还是使用了hash模式
        16     mode = ‘hash‘;
        17   }
        18   if (!inBrowser) {
        19     mode = ‘abstract‘;
        20   }
        21   this.mode = mode;
        22   switch (mode) {
        23     case ‘history‘:
        24       this.history = new HTML5History(this, options.base);
        25       break
        26     case ‘hash‘:
        27       this.history = new HashHistory(this, options.base, this.fallback);
        28       break
        29     case ‘abstract‘:
        30       this.history = new AbstractHistory(this, options.base);
        31       break
        32     default:
        33       {
        34         assert(false, ("invalid mode: " + mode));
        35       }
        36   }
        37 };  

#在设计缓存时一定要考虑到上下文的依赖,过时的缓存有啥用呢

end

  

时间: 2024-11-05 23:32:53

vue-router在ie9及以下history模式支持的相关文章

如何去除vue项目中的 # --- History模式

使用vue-cli搭建的环境,在配置好路由之后,可以看到下面的情况: 但是不难发现#的出现真的很丑陋,并且也不知道这是什么作用? 所以就去Stack Overflow上搜索了,果然还有~  看来Stack Overflow是真的强大,你在项目中遇到的问题实际上在so上都已经被问过并且解决了,这不:    这是最高票的回答,即在vue2中将mode模式设置为history,试过之后确实奏效! 但是知道这样可以解决问题,却不知道为什么,这是不行的, 随着连接,我们看到了文档. 所以这篇文章也就是引申

Laravel+vue实现history模式URL可行方案

项目:laravel + vue 实现前后端分离.vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. hash URL 例如:http://yoursite.com/#/user/id. history 模式时,URL就像正常的 url,例如 http://yoursite.com/user/id. 没有特别的要求的话,hash模式亦正常访问.好嘛,产品要求URL要像正常那样的 -- history模

vue的mode: &#39;history&#39;模式

1 const router = new VueRouter({ 2 mode: 'history', 3 routes: [...] 4 }) 不用mode: 'history'的时候,页面url地址后面会加上一个"#"(官方文档说这样需要后台配置参考地址  https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD

vue路由的两种模式配置以及history模式下面后端如何配置

vue路由的两种模式配置以及history模式下面后端如何配置 1.hash ——即地址栏URL中的#符号.hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面.2.history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法.需要特定浏览器支持history模式,会出现404 的情况,需要后台配置.3.hash模式下,仅hash符号之前的内容会被包含在请求

vue history模式下出现空白页情况

问题描述:   vue搭建的项目,路由一直用的hash模式,所以url中都会带有一个“#”号.现在想要去掉“#”,于是使用history模式 { mode: 'history' },代码如下: import Vue from 'vue'; import App from './App'; import routers from './router'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const router = ne

vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 &quot;invalid signature&quot;错误解决方案

项目背景 vue-cli生成的单页面项目,router使用history模式.产品会在公众号内使用,需要添加微信JSSDK,做分享相关配置. 遇到的问题 相关配置与JS接口安全域名都已经ok,发布后,pc端微信开发者工具与Android手机 内测试分享都没问题,无论怎么跳转再分享也没问题.IOS 手机,首次到页面分享没问题,但是跳转后,就会报invalid signature 签名错误. 就是说 从 [http://aaa.com/index] 跳到 [http://aaa.com/detail

Vue系列:Vue Router 路由梳理

Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数.查询.通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式,在 IE9 中自动降级 自定义的滚动条行为 1.动态路由 动态路由,可以将某种模式匹配到的所有路由,并全都映射到同个组件. (通俗点,比如根

Vue.js路由管理器 Vue Router

起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p>

一、Vue Router 的使用

什么是路由 路由是根据不同的url地址展示不同的内容或页面.可分为前端路由和后端路由. 后端路由:通过用户请求的url导航到具体的html页面:每跳转到不同的URL,都是重新访问服务端,然后服务端返回页面,页面也可以是服务端获取数据和模版组合,返回HTML,也可以是直接返回模版HTML,然后由前端再去请求数据,使用前端模版和数据进行组合,生成想要的HTML.(意味着,浏览器刷新页面.网速慢的话说不定屏幕全白再有新内容) 简单来说路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不