广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >AngularJs如何实现返回前一页面时刷新一次前面页面
  • 189
分享到

AngularJs如何实现返回前一页面时刷新一次前面页面

2024-04-02 19:04:59 189人浏览 泡泡鱼
摘要

小编给大家分享一下angularjs如何实现返回前一页面时刷新一次前面页面,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!要求:页

小编给大家分享一下angularjs如何实现返回前一页面时刷新一次前面页面,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

要求:

页面A进入到页面B,在页面B处理完后返回页面A,页面A里的数据应该动态的减去一条,但由于一般情况下页面是缓存起来的,返回A后读取的是缓存静态页面,里面显示的数据不会减少。应客户要求,需要重新加载一次数据,达到页面A可以刷新数据目的。

研究过程:

从网上寻找发现,有一个方法可以获取到当前页面的URL:$location

以 ‘Http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash' 这个路径为例:

1. 获取当前完整的url路径:

$location.absUrl():
// http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash

2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值):

$location.url();
// /foo?name=bunny#myhash

3. 获取当前url的子路径(也就是当前url#后面的内容,不包括参数):

$location.path()
// /foo

4. 获取当前url的协议(比如http,https)$location.protocol()

$location.protocol()
// http

5. 获取当前url的主机名

$location.host()
// localhost

6. 获取当前url的端口

$location.port()
// 80 (这里就是wamp的默认端口号)

获取到当前页的URL后,把它赋给全局变量,当URL变化时,刷新前一页面即可

parent.location.reload(); //该方法可用于刷新前面所以页面

之后继续在网上找有没有更好的办法,发现了一个可以直接使用的方法:

这两个事件分别发生在当url开始发生改变,以及url改变完成.他们都被绑定在$rootScope里面:

$rootScope.$on('$locationChangeStart',function(){
  console.log('开始改变$location')
});
$rootScope.$on('$locationChangeSuccess',function(){
  console.log('结束改变$location')
});

之后写进代码里做了验证,验证结果可用。写法为:

$rootScope.$on('$locationChangeSuccess',function(){//返回前页时,刷新前页
 parent.location.reload(); 
});

以上是“AngularJs如何实现返回前一页面时刷新一次前面页面”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网VUE频道!

--结束END--

本文标题: AngularJs如何实现返回前一页面时刷新一次前面页面

本文链接: https://www.lsjlt.com/news/78387.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • AngularJs如何实现返回前一页面时刷新一次前面页面
    小编给大家分享一下AngularJs如何实现返回前一页面时刷新一次前面页面,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!要求:页...
    99+
    2022-10-19
  • angular+ionic实现返回上一页并刷新页面
    这篇文章主要讲解了“angular+ionic实现返回上一页并刷新页面”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“angular+ionic实现返回上一页...
    99+
    2022-10-19
  • 小程序如何关闭当前页面返回上一页面
    这篇“小程序如何关闭当前页面返回上一页面”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“小程序如何关闭当前页面返回上一页面”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来...
    99+
    2023-06-26
  • AngularJS如何实现页面定时刷新
    这篇文章主要介绍了AngularJS如何实现页面定时刷新,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。有时我们在前端可能会有这样的需求:1、...
    99+
    2022-10-19
  • 微信小程序 操作完当前页面会,自动返回上一级页面,上一级页面自动刷新
    小程序页面有5个声明周期: 是由onLoad(页面加载)、onReady(页面初次渲染完成)、onShow(页面显示)、onUnload(页面卸载)   实现返回上一页的时候 其实是直接将隐藏的页面显示出来,所以不存在页面的再次加载 A页...
    99+
    2023-10-06
    微信小程序 小程序 前端 javascript
  • Django 创建一个返回当前时间的页面
    创建一个 Django 项目及应用 django-admin startproject mysite cd mysite # 手动创建一个 templates 文件夹用来保存 html 文件 mkdir templates pyth...
    99+
    2023-01-31
    创建一个 页面 时间
  • php如何实现返回不刷新页面
    这篇文章主要讲解了“php如何实现返回不刷新页面”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“php如何实现返回不刷新页面”吧!php实现返回不刷新页面的方法:1、打开相应的PHP代码文件;...
    99+
    2023-06-25
  • JS实现返回上一页并刷新页面的方法分析
    要实现返回上一页并刷新页面,可以使用以下几种方法:1. 使用`history.back()`方法返回上一页,并在返回后使用`loca...
    99+
    2023-08-11
    JS
  • php如何跳转到上级页面或退回前一个页面
    本篇内容介绍了“php如何跳转到上级页面或退回前一个页面”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!要理解如何跳转到上级页面或者退回到前一...
    99+
    2023-07-05
  • vue返回上一页面时不刷新问题及解决方案
    目录返回上一页面时不刷新前景思路说明页面回退后,不刷新问题问题描述问题解决返回上一页面时不刷新 前景 在日常使用的时候,我们经常需要返回上一级页面的时候,不刷新页面,保持页面不变,这...
    99+
    2022-11-13
  • 查找并返回一段时间以前访问过的Web页面
    如需查找您在几天前、几周前甚至几个月前访问过、但又s XP中借助Internet Explorer 6所提供的History(历史记录)列http://www.cppcns.com表进行追溯。单击工具栏上的History...
    99+
    2023-05-24
    查找并返回.一段时间以前.访问过的.Web页面 一段时间 页面 Web
  • 如何查找并返回一段时间以前访问过的Web页面
    今天就跟大家聊聊有关如何查找并返回一段时间以前访问过的Web页面,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。如需查找您在几天前、几周前甚至几个月前访问过、但又不曾添加到Favori...
    99+
    2023-06-14
  • vue使用elementUI分页如何实现切换页面时返回页面顶部
    目录使用elementUI分页实现切换页面时返回页面顶部原理实现element-ui分页el-pagination的坑1.所有的信息都必须的动态的2.数据在data里面3.这是重中之...
    99+
    2022-11-13
    vue使用elementUI分页 elementUI切换页面 elementUI返回页面顶部
  • 微信小程序中如何实现返回tabBar不刷新页面
    这篇文章主要介绍微信小程序中如何实现返回tabBar不刷新页面,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、在一个项目中,遇到了这个场景:返回tabBar中的某个页面是需要保存数...
    99+
    2022-10-19
  • JS实现页面加载完成之后自动刷新一次问题
    目录JS页面加载完成之后自动刷新一次JS运行后自动刷新页面问题解决方法总结JS页面加载完成之后自动刷新一次 先贴出代码,如果有兴趣看我解题思路的可以看下,没兴趣的直接拿走用,节省时间...
    99+
    2023-02-08
    JS页面加载 页面加载自动刷新 JS页面自动刷新
  • vue如何实现返回上一页面时回到原先滚动的位置
    这篇文章主要为大家展示了“vue如何实现返回上一页面时回到原先滚动的位置”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue如何实现返回上一页面时回到原先滚动的...
    99+
    2022-10-19
  • pushState、replaceState、onpopstate如何实现Ajax页面的前进后退刷新功能
    这篇文章主要介绍pushState、replaceState、onpopstate如何实现Ajax页面的前进后退刷新功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!使用Ajax可以异步获取数据,可以更高效地渲染页面...
    99+
    2023-06-08
  • jQuery如何实现AJAX定时刷新局部页面
    这篇文章主要介绍了jQuery如何实现AJAX定时刷新局部页面,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。方法一:局部刷新我们讲述到最多的...
    99+
    2022-10-19
  • Ajax如何实现无闪烁定时刷新页面
    这篇文章主要介绍Ajax如何实现无闪烁定时刷新页面,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在Web开发中我们经常需要实现定时刷新某个页面:来保持session的值或者检查session的值是否为空(比如说防止同...
    99+
    2023-06-08
  • 小程序开发中如何实现停止当前页面下拉刷新
    这篇“小程序开发中如何实现停止当前页面下拉刷新”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“小程序开发中如何实现停止当前页面下拉刷新”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢...
    99+
    2023-06-26
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作