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 Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
js实现select下拉框菜单
Dec 08 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
关于vue-router的那些事儿
May 23 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导入大量数据到mysql性能优化技巧
2014/12/29 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
php中数组最简单的使用方法
2020/12/27 PHP
javascript 运算数的求值顺序
2011/08/23 Javascript
js Date概念详细介绍
2013/11/22 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
Python切图九宫格的实现方法
2019/10/10 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
Python爬取梨视频的示例
2021/01/29 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
html5 视频播放解决方案
2016/11/06 HTML / CSS
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
联欢晚会主持词
2014/03/25 职场文书
个人投资计划书
2014/05/01 职场文书
繁星春水读书笔记
2015/06/30 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
小学中队委竞选稿
2015/11/20 职场文书