Henry Henry
  • JavaScript
  • TypeScript
  • Vue
  • ElementUI
  • React
  • HTML
  • CSS
  • 技术文档
  • GitHub 技巧
  • Nodejs
  • Chrome
  • VSCode
  • Other
  • Mac
  • Windows
  • Linux
  • Vim
  • VSCode
  • Chrome
  • iTerm
  • Mac
  • Obsidian
  • lazygit
  • Vim 技巧
  • 分类
  • 标签
  • 归档
  • 网站
  • 资源
  • Vue 资源
GitHub (opens new window)

Henry

小学生中的前端大佬
  • JavaScript
  • TypeScript
  • Vue
  • ElementUI
  • React
  • HTML
  • CSS
  • 技术文档
  • GitHub 技巧
  • Nodejs
  • Chrome
  • VSCode
  • Other
  • Mac
  • Windows
  • Linux
  • Vim
  • VSCode
  • Chrome
  • iTerm
  • Mac
  • Obsidian
  • lazygit
  • Vim 技巧
  • 分类
  • 标签
  • 归档
  • 网站
  • 资源
  • Vue 资源
GitHub (opens new window)
  • JavaScript

  • TypeScript

  • Vue

    • Vue 编码指南
    • vue-cli 启动本地服务局域网不能访问的原因分析
    • 解决 Vue 相同路由参数不同不会刷新的问题
    • 解决 vuex requires a Promise polyfill in this browser 问题
    • 关于父组件通过 v-on 接收子组件多个参数的一点研究
    • Vue $attrs 和 $listeners
    • Vue axios 发送 Form Data 数据格式请求
    • Vue 开发技巧
    • Vue 动态路由
    • Vue 集成 UEditor 富文本编辑器
    • Vue 修饰符
    • Vue 问题集合
    • Vue props 传多值的问题
    • vue-router 在 IE11 下手动更改 URL 的 hash 不会触发路由
    • vue-router 路由参数刷新消失的问题
    • 那些年被我们忽略的 vue 语法
    • vue 生命周期深入
    • vue 组件通信深入
    • vue 组件通信深入 Vuex
    • vue项目移动端、pc端适配方案
    • vuepress 如何引入 vuex
  • ElementUI

  • React

  • AntD

  • 前端
  • Vue
Henry
2018-05-21

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 事件.

编辑 (opens new window)
#Vue
上次更新: 5/27/2023, 1:02:05 PM
Vue props 传多值的问题
vue-router 路由参数刷新消失的问题

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

最近更新
01
version 1.15
07-01
02
version 1.14
06-27
03
version 1.13
06-27
更多文章>
Theme by Vdoing | Copyright © 2017-2023 HenryTSZ | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式