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

2018/05/21

在 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}`">
		
	</el-menu-item>
</el-menu>

Manual change of hash into the URL doesn’t trigger the route in IE11

这里面讨论的内容与上面问题类似,在 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)
}

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