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中Array 对象相关的几个方法
Dec 22 Javascript
通过jQuery源码学习javascript(二)
Dec 27 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
js 函数的副作用分析
2011/08/23 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
Python Flask-web表单使用详解
2017/11/18 Python
Python logging模块用法示例
2018/08/28 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
修理厂厂长岗位职责
2014/01/30 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
2014年小学工作总结
2014/11/26 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
市级三好生竞选稿
2015/11/21 职场文书
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS