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插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
react-router中的属性详解
Jun 01 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
Angular路由ui-router配置详解
Aug 01 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 Javascript
详解vue 组件注册
Nov 20 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
80行代码写一个Webpack插件并发布到npm
May 24 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
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
php 启动报错如何解决
2014/01/17 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
基于jQuery的动态表格插件
2011/03/28 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
详解Python中类的定义与使用
2017/04/11 Python
python redis 删除key脚本的实例
2019/02/19 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
深入分析python 排序
2020/08/24 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
python绘制雷达图实例讲解
2021/01/03 Python
高山背包:High Sierra
2017/11/23 全球购物
应届生如何写自荐信
2014/01/05 职场文书
法人代表证明书格式
2014/10/01 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书