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 相关文章推荐
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
jquery 插件开发方法小结
Oct 23 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
JQuery性能优化的几点建议
May 14 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
微信小程序自定义胶囊样式
Dec 27 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 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
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
php echo 输出字符串函数详解
2010/05/13 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
Python使用plotly绘制数据图表的方法
2017/07/18 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
详解Python字典的操作
2019/03/04 Python
django queryset相加和筛选教程
2020/05/18 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
python中的测试框架
2020/11/13 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
结构和类有什么异同
2012/07/16 面试题
Linux的文件类型
2016/07/05 面试题
美术课外活动总结
2014/07/08 职场文书
食品安全承诺书范文
2014/08/29 职场文书
信访稳定工作汇报
2014/10/27 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
深入理解python多线程编程
2021/04/18 Python