Vue路由-ie上地址栏输入路由页面不更新

情景:在ie11地址栏上直接输入路由,开发环境页面能正常刷新,在测试环境上不更新也不报错。测试环境在火狐、chrome浏览器地址栏上直接输入路由能正常更新页面。但是在App.vue中添加以下代码后,测试环境在ie11也能正常更新页面。闲话不多说,上代码: 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({  el: ‘#app‘,  router,  store,  render: h => h(App),  mixins: [IE11RouterFix]})

原文地址:https://www.cnblogs.com/hanzeng1993/p/12106175.html

时间: 2024-10-09 19:53:15

Vue路由-ie上地址栏输入路由页面不更新的相关文章

Vue中解决路由切换,页面不更新的实用方法

前言:vue-router的切换不同于传统的页面的切换.路由之间的切换,其实就是组件之间的切换,不是真正的页面切换.这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页面无法更新的问题了. 一.问题呈现 在路由中进行切换结果 这时候会发现input标签的value值并没有随着路由的改变而改变.并没有更新 二.解决方案① 给<router-view :key="key"></router-view>增加一个不同:key值,这样vue

从零开始Vue项目实战(四)-路由

一.理解路由 传统的页面应用,是用一些超链接来实现页面切换和跳转的.而vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来. 路由中有三个基本的概念 route, routes, router. 1, route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮  => home内容, 这是一条route,  about按钮 => about 内容, 这是另一条路由. 2, routes 是一组路由,把上面的每一条路由组合起来,形成一个数组.[{

iw14.0.50来了,终于可以直接在地址栏输入url打开iw功能页面了;可以自由使用EasyUI等js框架了;显示模式对话框也不再七绕八绕惹人烦了;

示例代码已经放出!请移步使用delphi+intraweb进行微信开发1~4代码示例进行下载,虽为示例代码但是是从我项目中移出来的,封装很完备适于自行扩展和修改. iw14.0.50来了,在新的版本中最吸引我的就是增加了完善的httphandler功能:终于可以直接在地址栏输入url打开iw功能页面了:可以自由使用EasyUI等js框架了:显示模式对话框也不再七绕八绕惹人烦了:呵呵,我感觉iw第一次接近主流web开发工具了! 兴奋过了,来尝试一下吧.其实iw的坑还是挺多的,虽然已经接近主流了,但

Vue+axios 实现http拦截及路由拦截

现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的文档已经有很多了,我就不再累述了. 技术栈 vue2.0 vue-router axios 拦截器 首先我们要明白设置拦截器的目的是什么,当我们需要统一处理http请求和响应时我们通过设置拦截器处理方便很多. 这个项目我引入了element ui框架,所以我是结合element中loading和me

vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失

在实际开发中,嵌套路由经常会用到,基本用法也很简单,今天遇到了当前路由下(父路由)在点击它的子路由时,他的(父路由)选中状态消失了 原因是: 1.子路由router-link加了exac精确匹配路由 2.在写路由的时候,父子路由没有严格按照一级/二级来写 嵌套路由中默认选中第一个子路由 { path: '/dec', // 设备中心,主路由 redirect: '/dec/decOverview', name: 'decIndex', component: DecIndex, meta: { t

Vue路由重写# 与 Web服务器路由重写双配置实现路由重写

前言vue路由组件我使用的vue-routerweb服务器使用nginx Vue-router配置vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载http://localhost:8080/#/HelloWorld如果不想要很丑的 hash,可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面 const router

angular2地址栏读取路由

这关乎于Nodejs的express路由规则(http://hm4123660.iteye.com/blog/2195035) express 封装了多种 http 请求方式,我们主要只使用 get和post,可以使用 app.all 获取所以请求方式,回调函数有两个参数分别是 req 和 res,代表请求信息和响应信息. req.query : 处理 get 请求 req.params : 处理 /:xxx 形式的 get 请求 req.body : 处理 post 请求 req.param(

OpenWRT 路由系统上抓包

前言: 做路由器开发,难免会遇到抓包的情况,但是抓包需要有Hub或者无线抓包网卡,调试无线问题,且目前手中没有无线抓包网卡,怎么办?那不能分析无线连接建立的过程,我们就来分析下,其传输的数据,肯定是从ra0无线接口来进行了. 准备: 编译tcpdump.ipk, libpcap.ipk并且安装到OpenWRT系统中. 可选传输方式scp, wget等. wget http://<web server>/target_file opkg install <package_name>.

最佳实践:IDC双专线静态路由冗余上云方案

摘要: 通过介绍专线接入和云企业网组合应用的方式,提供客户IDC冗余链路专线接入静态路由配置的混合云解决方案. 大家好,我是云企业网产品经理辰城.之前为大家介绍了专线通过BGP结合云企业网主备上云的方案.今天为大家介绍在专线侧没有使用BGP路由协议,使用静态路由的情况下,通过冗余链路上云方案. 场景分析通过专线接入和云企业网组合的方式,客户IDC冗余专线上云,并和云上不同地域VPC互通的场景. 网络拓扑1:客户IDC已通过专线双冗余方式,链接到阿里云的不同边界路由器实现冗余链路.IDC和VBR之