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生成asp.net服务器控件的代码
Feb 04 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
vue实现动态按钮功能
May 13 Javascript
微信小程序自定义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 FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
有关php运算符的知识大全
2011/11/03 PHP
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
php短址转换实现方法
2015/02/25 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
Python中的time模块与datetime模块用法总结
2016/06/30 Python
Python数据可视化之画图
2019/01/15 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
JSF的标签库有哪些
2012/04/27 面试题
给民警的表扬信
2014/01/08 职场文书
幼儿园数学教学反思
2014/02/02 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
初中家长评语和期望
2014/12/26 职场文书
承诺函范文
2015/01/21 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫