vue里router-link在IE里的兼容

蔚落 2021-09-20 02:48 454阅读 0赞

还是IE的兼容，在IE浏览器中，router-link的跳转是失效的，主要是因为当url的hash变化的时候，浏览器没有做出相应的反应。这时候需要当浏览器是IE的时候手动给url加一个hashChange事件了。  
有两个解决方法。  
第一个，直接在渲染的时候去执行一个兼容浏览器的方法：

new Vue({
      el: '#app',
      router,
      store,
      template: '<Layout/>',
      components: { Layout },
      render: function (createElement) {
        if ('-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style) {
          window.addEventListener('hashchange', () => {
            var currentPath = window.location.hash.slice(1)
            if (this.$route.path !== currentPath) {
              this.$router.push(currentPath)
            }
          }, false)
        }
        return createElement(Layout);
      }
    })

第二个，使用混入 (mixin) ，将该兼容方法挂到vue实例上：

const IE11RouterFix = {
        methods: {
            hashChangeHandler: function() { this.$router.push(window.location.hash.substring(1, window.location.hash.length)); },
            isIE11: function() { return !!window.MSInputMethodContext && !!document.documentMode; }
        },
        mounted: function() { if ( this.isIE11() ) { window.addEventListener('hashchange', this.hashChangeHandler); } },
        destroyed: function() { if ( this.isIE11() ) { window.removeEventListener('hashchange', this.hashChangeHandler); } }
    };
    
    new Vue({
        mixins: [IE11RouterFix],
    });

如果改完之后还是不能跳转，那就清下缓存或者重启浏览器。

发表评论取消回复

表情：

评论列表（有 0 条评论，454人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts在vue里使用

安装 npm install echarts --save 注册全局main.js import echarts from 'echarts'

「爱情、让人受尽委屈。」/ 2023年06月30日 05:28/ 0 赞/ 53 阅读

相关 vue项目里引用three里的OrbitControls

vue文件 <template> <div> <div id="container"></div> </div> </

- 日理万妓/ 2022年12月01日 14:05/ 0 赞/ 255 阅读

相关 vue-ant-design 在ie的兼容问题

> 一开始没有注意ie的兼容,在谷歌中一切都很正常. > 但是 > 才发现,当我在ie中运行的时候,界面直接白板了,而且是ie 11. 还不是低版本,都已经行不通了

ゝ一纸荒年。/ 2022年11月29日 13:12/ 0 赞/ 385 阅读

相关在（Docker里的）Jenkins里运行Docker

在本文中，我们将快速了解一下如何在一个容器里装载Docker sock以便创建其“兄弟”容器。我的一个同事称之为DooD（Docker-outside-of-Docker），以

朱雀/ 2022年09月25日 11:14/ 0 赞/ 353 阅读

相关 placeholder在ie浏览器里不显示的问题解决

placeholder在ie浏览器里不显示的问题解决参考文章： [（1）placeholder在ie浏览器里不显示的问题解决][1_placeholder_ie] （2

- 日理万妓/ 2022年09月05日 04:28/ 0 赞/ 252 阅读

相关 Vue2.0 之自带浏览器里无法打开（兼容IE处理） - 解决方案命令

Vue 之 android内嵌H5页面不显示出现这个问题，原因有很多首先，别急，请看下面的推荐方案： 1、找个android真机测试下（机型版本为4.4以上），真机联

小咪咪/ 2022年06月06日 02:41/ 0 赞/ 200 阅读

相关 getBoundingClientRect在IE9/10里的bug

getBoundingClientRect可以获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，最早在[IE][]中实现，后其它浏览器均已实现。但它在IE9,10

秒速五厘米/ 2022年03月31日 04:16/ 0 赞/ 398 阅读

相关 vue-cli 兼容ie，vue项目兼容ie9.ie11

1、首先 npm install --save babel-polyfill 2、然后在`main.js`中的最前面引入`babel-polyfill`

￡神魔★判官ぃ/ 2022年03月30日 04:47/ 0 赞/ 771 阅读

相关如何在vue里引入Bootstrap

1. 安装jquery $ npm install jquery --save-dev 2：在webpack.config.js 添加内容 const webpack

￡神魔★判官ぃ/ 2022年01月21日 06:13/ 0 赞/ 412 阅读

相关 vue里router-link在IE里的兼容

还是IE的兼容，在IE浏览器中，router-link的跳转是失效的，主要是因为当url的hash变化的时候，浏览器没有做出相应的反应。这时候需要当浏览器是IE的时候手动给ur

蔚落/ 2021年09月20日 02:48/ 0 赞/ 455 阅读