编程 Javascript

Angular懒加载机制刷新后无法回退的快速解决方法

Posted in Javascript onAugust 30, 2016

今天在项目中遇到一个很奇怪的问题,使用oclazyload懒加载angular的模块,刷新页面后,单击回退按钮无法返回上一个页面.估计是使用懒加载机制销毁了angular内部的state关联,导致无法回到上一个state(单击回退按钮 ui-routre的 $stateChangeStart 事件都不会触发),当然这只是猜测,由于事件关系也没有去深入的探究源码.

angular懒加载机制刷新后无法回退的解决方案 :

通过查看angular(ionic)的源码发现$browser这个服务上有个onUrlChange方法,当我们从angular外部改变url地址时,会调用此方法中注册的事件处理函数,如下图所示:

这样的话,就可以在程序入口注册一个函数

//当通过浏览器回退/前进按钮跳转state时,重新加载页面,如果用系统state,则不会进入此方法 
$browser.onUrlChange(function (url) { 
//TODO 解析url中的state,使用懒加载去加载state模块,实现页面刷新
});

通过这个函数就可以在回退和前进的时候重新去刷新页面了...

以上所述是小编给大家介绍的Angular懒加载机制刷新后无法回退的快速解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

Angular懒加载机制刷新后无法回退的快速解决方法

- Author -

紫日残月

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 写类方式之十

Jul 05 Javascript

js客户端快捷键管理类的较完整实现和应用

Jun 08 Javascript

jquer之ajaxQueue简单实现代码

Sep 15 Javascript

IE的有条件注释判定IE版本详解（附实例代码）

Jan 04 Javascript

针对初学者的jQuery入门指南

Aug 15 Javascript

JS实现图片上传预览功能

Nov 21 Javascript

使用JavaScript解决网页图片拉伸问题(推荐)

Nov 25 Javascript

详解js的异步编程技术的方法

Feb 09 Javascript

vue-cli webpack 开发环境跨域详解

May 18 Javascript

使用Promise封装小程序wx.request的实现方法

Nov 13 Javascript

微信小程序仿淘宝热搜词在搜索框中轮播功能

Jan 21 Javascript

js中复选框的取值及赋值示例详解

Oct 18 Javascript

AngularJS 实现弹性盒子布局的方法

Aug 30 #Javascript

浅谈javascript中的Function和Arguments

Aug 30 #Javascript

javascript 中的console.log和弹出窗口alert

Aug 30 #Javascript

Laravel中常见的错误与解决方法小结

Aug 30 #Javascript

js中常用的Tab切换效果(推荐)

Aug 30 #Javascript

基于cssSlidy.js插件实现响应式手机图片轮播效果

Aug 30 #Javascript

JavaScript探测CSS动画是否已经完成的方法

Aug 30 #Javascript