vue-router 在 IE11 下手动更改 URL 的 hash 不会触发路由

在 IE、chrome 中, 通过 Element-Ui 的 el-menu 的 router 属性, 点击切换路由是可以正常跳转的, 但如果手动输入 url, chrome 可以正常跳转, 但 IE 没有任何反应

<el-menu class="navbar" :default-active="activeIndex" mode="horizontal" router>
  <el-menu-item v-for="item in navList" :key="item.code" :index=" `/${item.code}` ">
    {{item.name}}
  </el-menu-item>
</el-menu>

1
2
3
4
5

Manual change of hash into the URL doesn't trigger the route in IE11 (opens new window)

这里面讨论的内容与上面问题类似, 在 IE11 上无法用 router-link 跳转, 主要是当 url 的 hash change 的时候浏览器没有做出响应. 里面主要是做了一个兼容.

// main.js
// 解决在 IE 下，当 url 的 hash change 的时候浏览器没有做出相应
if ('-ms-scroll-limit' in document.documentElement.style &&
  '-ms-ime-align' in document.documentElement.style) { // detect it's IE11
  window.addEventListener('hashchange', function (event) {
    let currentPath = window.location.hash.slice(1)
    router.push(currentPath)
  }, false)
}

1
2
3
4
5
6
7
8
9

这个兼容就是当检测到浏览器为 IE 的时候, 手动给 url 加一个 hashchange 事件.

编辑

#Vue

上次更新: 11/12/2020, 6:27:50 AM

← Vue props 传多值的问题 vue-router 路由参数刷新消失的问题→