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 相关文章推荐
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
JQ实现新浪游戏首页幻灯片
Jul 29 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
JavaScript实现多球运动效果
Sep 07 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 split汉字
2009/06/05 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
PHP 正则表达式小结
2015/02/12 PHP
PHP时间函数使用详解
2019/03/21 PHP
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
javascript表单正则应用
2017/02/04 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
python之pandas用法大全
2018/03/13 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
保荐人的岗位职责
2013/11/19 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
教师对学生的评语
2014/04/28 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
销售合作意向书范本
2015/05/08 职场文书