vue地址栏直接输入路由无效问题的解决


Posted in Javascript onNovember 15, 2018

vue 项目只要不是静态页面,一般都会和官方的路由管理器 vue-router 一起使用。

最近项目有一个需求,是在地址栏输入路由,跳转到对应路由组件,在开发环境中这样做是可以跳转的,但是项目打包后,通过地址栏跳转会报错。

因为 vue 在页面上显示哪个组件是根据 vue-router 进行控制的,在地址栏上直接输入路由名称,并不能触发 vue-router 的规则,所以只能通过监听地址的改变,利用回调函数在组件内部进行动态修改路由。

方式一:history 模式

vue-router 默认是 hash 模式,通过更改模式为 history 模式可以解决这个问题,但是这需要后端配合,更改服务端配置,虽然过程稍麻烦但也是一个办法,有兴趣的朋友可以查看往期文章 。

方式二:hashchange 事件

什么是 hash?

hash 就是 URL 地址中 # 字符后面的字符串。

更改它不会导致整个页面重新加载,而且可以定位到元素 id 或 name 与之相同的位置(锚点)。

window.location.hash 可以获取到 hash。比如 localhost:8080/#/abcde 的 location.hash="#/abcde"。

通过监听 hash 的状态,来动态修改 vue-router 的路由,是页面进行组件切换,这样就不会导致页面报错或 404 了。

当 hash 被修改时,将触发 hashchange 事件(IE8 +支持):

window.addEventListener('hashchange',function(e) {
  console.log(e.oldURL); 
  console.log(e.newURL)
},false);

所以在 App.vue 中添加此事件:

mounted(){
  window.addEventListener('hashchange',()=>{
    var currentPath = window.location.hash.slice(1); // 获取输入的路由
    if(this.$router.path !== currentPath){
      this.$router.push(currentPath); // 动态跳转
    }
  },false);
}

这样即可解决,在地址栏输入路由跳转无效问题。

补充:Vue路由——ie上地址栏输入路由页面不更新

情景:在ie11上从当前A页面(/a)跳转B页面(/b),在地址栏直接修改路由回车跳转B页面,发现页面还是A页面,但是地址栏地址已经是B页面地址。而且控制台并无报错。

解决方法:在App.vue中添加判断ie加手动修复:

mounted () {
      if (!!window.ActiveXObject || 'ActiveXObject' in window) {
        window.addEventListener('hashchange', () => {
          let currentPath = window.location.hash.slice(1)
          if (this.$route.path !== currentPath) {
            this.$router.push(currentPath)
          }
        }, false)
      }
    }

onhashchange事件ie8就已经支持了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 各种浏览器下获得日期区别
Dec 22 Javascript
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
微信小程序自定义toast弹窗效果的实现代码
Nov 15 #Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 #Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 #Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 #Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 #Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 #Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 #Javascript
You might like
PHP高级OOP技术演示
2009/08/27 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
设定php简写功能的方法
2019/11/28 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
Python 类的继承实例详解
2017/03/25 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
Python多个装饰器的调用顺序实例解析
2020/05/22 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
银行招聘自荐信
2015/03/06 职场文书
单位证明范文
2015/06/18 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
Python max函数中key的用法及原理解析
2021/06/26 Python