上次介绍了下写的登录弹框插件,过了几天发现点击去注册或者改密码的跳转失效。报错this.$router.push is not a function,继续打印this.$router也是undefined

(可以先看一下上一篇博客提到的弹框登录插件)

this.$router.push({ path:'/register'})

尝试了很久,试了三种方法。

需要注意的是:登录弹框是通过this.$login调用方法来动态插入组件的,这个登录弹框不在路由的组件管理范围内。

第一:引入子路由,需要加router-view

但是这样是作为子路由的方式,给当前赋值了路由对象。页面会出现重叠。

第二种:在main.js里把路由对象设为window对象下的某值

然后再loginBod.vue里调用。

结果也能跳转。

但是弹框还在,上面解释过了,路由切换卸载和动态加载不同的组件,但登录弹框是手动挂载上去的,所以需要手动去卸载。

第三种:直接用window.replace

路由router跳转的话,会根据路由对象动态的卸载挂载组件,所以弹框会保留。这种做法是提高性能减少消耗的。默认的路由哈希模式,是去操作哈希值重新定位路径,但是始终是由vue来操作对应的组件资源的。

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

顺便提一下这个点:记住一句话,如果本地跑没问题,推上正式有问题,百分之99都是资源路径的问题。

但是通过window.locaiton.replace,replace() 方法可用一个新文档取代当前文档,Dom直接删除,然后重新加载对应的路径资源。

总结:以上方式,推荐第二种,采用路由跳转,而且手动去卸载,针对性的符合场景式去做解决。

反思:找了半天没明白为什么会没有router对象,routerConfig也写了,只能去先找解决方法,有路过的大神多多指教。

vue登录插件引来的后续问题的更多相关文章

  1. vue各种插件汇总

    https://blog.csdn.net/wh8_2011/article/details/80497620(copy) Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一 ...

  2. vue封装插件并发布到npm上

    vue封装插件并发布到npm上 项目初始化 首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录, ...

  3. vue 常用插件,保存

    UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI ...

  4. 第三方登录插件.NET版XY.OAuth-CSharp

    XY.OAuth-CSharp GitHub:XY.OAuth-CSharp OSChina:XY.OAuth-CSharp 第三方登录插件.NET版 使用 首先,从NuGet上安装"XY. ...

  5. ECshop 快捷登录插件 支持QQ 支付宝 微博

    亲自测试可以使用,分享给大家.(承接各种EcShop改版,二次开发等相关项目 QQ:377898650) 安装的时候按照里面说明.安装即可. 代码下载:http://pan.baidu.com/s/1 ...

  6. nopCommerce 3.9 大波浪系列 之 微信公众平台登录插件

    一.简介 插件源码下载:点击下载 微信公众平台网站授权帮助地址:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp142114084 ...

  7. nopCommerce 3.9 大波浪系列 之 外部授权登录插件的开发实现

    一.简介 nop支持第三方外部授权登录的扩展,本篇通过编写微信公众平台登录插件进一步了解nop授权登录的开发过程. 微信公众平台.微信开放平台使用场景不一样,前者通过微信客户端进行开发如公众号,后者基 ...

  8. 写一个Vue loading 插件

    什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...

  9. Vue自定义插件方法大全

    新年第一天首先祝大家新年快乐,心想事成! 1.利用根实例构造函数的原型 //在构造函数的原型链上添加自定义属性 Vue.prototype.test = 'pomelo' //在其他组件中调用 con ...

随机推荐

  1. HDU 4512——吉哥系列故事——完美队形I——————【LCIS应用】

    吉哥系列故事——完美队形I Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Tot ...

  2. [Eclipse]自动注释功能

    1) 新建一个file时,加上一些注释的方法. window->preference->java->code     styple->code     template 当你选 ...

  3. WinForm皮肤 支持.NET4.0 IrisSkin4多彩皮肤演示和下载

    IrisSkin4是一款.NET平台非常优秀的Winform皮肤,链接库文件仅544kb,使用方法也非常简单 IrisSkin4(IrisSkin4.dll + 73套皮肤)[下载地址] 使用方法: ...

  4. 部署Cube报错,用户登录失败;280000

    在创建SSAS项目过程中,创建数据源.数据源视图.多维数据集.纬度等一切都没有问题.但是在“进程”这一步的时候,发现总是报错,提示如下. OLE DB 错误: OLE DB 或 ODBC 错误 : 用 ...

  5. iOS 状态栏设置为白色

    1.首先需要再info.plist中添加一项View controller-based status bar appearance为no 2.在需要的地方添加代码 [[UIApplication sh ...

  6. Python is 和 == 的区别, 编码和解码

    一.is 和 == 的区别 is : 进行比较,比较的是内存地址是否一致 ==:进行比较,比较的是值是否相等 1.小数据池: 数字小数据池范围 -5~256 字符串中如果有特殊字符则他们的内存地址不一 ...

  7. css3之移动平台资源

    随着移动端越来越普及,前端技术也是百花齐放,但目前移动平台的技术已经趋向于成熟,记得刚实习的时候就是接触的移动端,但现在2年多来,期间遇到了很多莫名其妙的问题,见证了手机用户量的突飞猛进,兴喜的是更多 ...

  8. 栅格那点儿事(一)---Raster是个啥子东西

    Raster是个啥子东西 现如今,不仅是在遥感应用中能看到花花绿绿的影像了,在GIS应用中也能随处看到她们的身影.在各种在线地图中,卫星影像作为底图与矢量的道路层叠加:高程DEM作为高程来源实现地形的 ...

  9. Springboot开源项目实例整理

    https://www.imooc.com/article/67664 ---------------------------------------------------------------- ...

  10. appium (五)desired_caps参数

     转自:http://blog.csdn.net/Yejianyun1/article/details/56279051   一.介绍 在appium server 与手机端建立会话关系时,手机端需要 ...