AngularJS/ui.router返回上一页

最新推荐文章于 2024-07-14 12:56:18 发布
最新推荐文章于 2024-07-14 12:56:18 发布
阅读量1k 收藏
点赞数 1
分类专栏： AngularJS 问题记录与解决 文章标签： javascript angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30156795/article/details/116935298
版权

最近在做老项目优化，发现原本“返回上一页”的功能，非常凌乱、可读性很差。

具体的场景是这样的

A、B、C等多个页面都可以进入到D页面，D页面里有一个“返回上一页”功能，由于D页面里有iframe每次加载都会添加浏览记录，导致history.go(-1)不能返回想要的上一页。

于是全部通过一个historyUrlService管理，在ABC页面跳转到D之前，保存来源，在D页面返回上一页的时候读取这个来源，然后手动进行跳转。

这个实现问题非常大，可能写的人熟悉业务觉得没问题，反正我看的时候全局搜索看了半天，如果再多几个入口和出口，基本就没人能看懂了吧。

我的解决方法是这样的

不要做这么多加法，回到最初的起点，浏览器默认的记录不好用就自己维护一套，需要回退的时候找出来加载就行了。

项目使用了ui.router，就结合这个库提供的路由事件 $stateChangeSuccess 它在路由转换完成后触发。

很简单的几行代码不需要太多说明，页面跳转完成之后保存这次的访问记录在 $rootScope.historyStack 数组里，返回上一级的时候先把当前页面的记录删掉，再获取上一个页面的记录并删掉，最后跳转过去

$rootScope.historyStack = $rootScope.historyStack
最低0.47元/天 解锁文章
MMMMQI
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angularjs--ui-router返回上一个路由
C1731633363的博客
12-09 807
希望通过点击事件返回上一个路由。 在 angularjs 使用 ui-router 时可如下处理，没有试验ngRoute 是否合适。 路由配置时配置 params var main = angular.module("main", [ "ui.router",//添加ui-router模块依赖 ]) .config(["$stateProvider", "$urlRouterPr...
Angular使用路由复用实现返回上一个页面不刷新
QQMESSI
12-31 3641
       当从列表进入详情后再返回时我们期望是页面不刷新的。在我不知道路由复用之前想要实现这个功能，我的解决方案是把一些条件存在session中，然后在ngOnInit()中去读取session再应用到页面中，这样实现了假的不刷新，但是后来发现当列表中含有大量筛选条件时，如果继续使用session的话要存好多东西。然后我就搜了一下，发现有路由复用这个概念。 路由复用存在以下几个状态： shouldReuseRoute 适用于在路由之间
angular返回上一页
天空影
11-15 4965
angular.js实现返回上一页
angular 返回上一页
T20170218的博客
09-12 609
history.go(-1); 转载于:https://www.cnblogs.com/king94Boy/p/9635180.html
ui-router实现返回上一页功能
weixin_30502965的博客
07-06 132
angular.module('ConsoleUIApp', ['ui.router','ui.bootstrap']) .config(function ($stateProvider, $urlRouterProvider, $httpProvider) { // For any unmatched url, redirect to /sta...
Angular 中如何返回上一页？
金木编程
12-01 1127
选择其中一种方法，根据你的项目需求和代码结构来决定使用哪种方式。在Angular中，有多种方法可以实现返回上一页。
angularjs中ui.router和ngRouter模块的用法
07-14
`ui.router`是AngularUI团队开发的一个第三方路由库，它提供了更高级的路由功能，特别是对多级视图和嵌套路由的支持。`ui.router`通过`$stateProvider`来配置路由，每个状态可以有多个视图，每个视图可以有独立的...
angularjs ui.router嵌套路由demo
03-11
AngularJS UI.Router是一个强大的路由模块，它为AngularJS应用程序提供了更复杂的导航结构和状态管理功能。这个"angularjs ui.router嵌套路由demo"是展示如何在AngularJS项目中使用UI.Router进行多级路由配置和页面...
Angularjs和ui-router的一个栗子
10-18
UI-Router是AngularJS的一个第三方路由插件，它为AngularJS的应用提供了更高级的路由和导航管理功能。 在AngularJS中，路由是非常关键的一部分，它允许用户在不刷新整个页面的情况下跳转到不同的视图。默认的...
AngularJS ui-router刷新子页面路由的方法
10-18
主要介绍了AngularJS ui-router刷新子页面路由的方法，网上虽然有很多种方法，但是都不适合小编，今天小编给大家分享一个还不错的方法，需要的朋友可以参考下
angular+ionic返回上一页并刷新页面
12-09
假定当前页面为editCata页面，要返回的是cataDetail页面。目前我找到两种方法实现返回上一页并刷新，如果以后有其它方法，再继续添加。 1、在editCataCtrl.js中注入$ionicHistory服务. 使用$ionicHistory.goBack()方法即可返回到上一页面。 JS端代码： $scope.goBack=function(){ $ionicHistory.goBack(); } HTML代码： <button class="button button-clear" ng-click="goBack()">返回上一页</button> 如果需要返回上
探讨AngularJs中ui.route的简单应用
10-21
在AngularJS中，UI-Router是一个强大的路由管理库，它扩展了AngularJS的原生路由功能，使得在单页面应用程序（SPA）中管理状态和页面导航变得更加灵活和高效。本篇将深入探讨AngularJS中ui-route的简单应用，提供...
angular Js 返回上一级页面 刷新页面的几种方法
Liradi-Birdy的博客
01-25 5480
当一个页面有多个tab的时候，从详情页面返回到主页，路由不能使用cache: true时，但是你又需要返回主页面刷新页面消息的时候，就可以使用下面的方法： // 界面缓存清理 $ionicHistory.clearCache().then(function () { $state.go('tabs.headlines', { module: "ORDER" }); }); ioni
在angularJS中实现返回前一页
...
04-13 1万+
html app angular.module('ConsoleUIApp', ['ui.router','ui.bootstrap']) .config(function ($stateProvider, $urlRouterProvider, $httpProvider) { // For any unmatched url, re
angularjs 路由回退，返回到上一个路由
热门推荐
Four的博客
03-08 2万+
在现阶段比较流行的angularjs框架中；路由是一个比较重要的应用；angularjs的单页面是其强大功能之一； 所有的页面其实就只是在一个页面就实现的：angularjs通过对路由的控制来进行页面的跳转； 使用过angularjs的开发者都知道怎么使用ngRoute服务进行页面控制；但是楼主在最近的开发之中； 遇到一个比较棘手的问题：原本app,js已经配置好的路由，每一个页面在使用时对
【Angular5】 返回前一页面 go back to previous page
weixin_30307267的博客
01-07 996
import { Component, OnInit } from '@angular/core'; import { Router} from '@angular/router'; import { Location } from '@angular/common'; @Component({ selector: 'app-notfound', templateUrl: './not...
AngularJs返回前一页面时刷新一次前面页面
qq_43685389的博客
11-13 929
AngularJs返回前一页面时刷新一次前面页面
Sortable.js板块拖拽示例
最新发布
w11111xxxl的博客
07-14 779
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
error in ./src/router/index.js Module not found: Error: Can't resolve '@/views/Contact.vue' in '/root/www/src/router' ERROR in ./src/router/index.js 3:0-36 Module not found: Error: Can't resolve '@/views/Home.vue' in '/root/www/src/router' @ ./src/main.js 5:0-30 9:2-8 ERROR in ./src/router/index.js 4:0-38 Module not found: Error: Can't resolve '@/views/About.vue' in '/root/www/src/router' @ ./src/main.js 5:0-30 9:2-8 ERROR in ./src/router/index.js 5:0-42 Module not found: Error: Can't resolve '@/views/Contact.vue' in '/root/www/src/router' @ ./src/main.js 5:0-30 9:2-8 ERROR in [eslint] /root/www/src/App.vue 26:7 error The "HelloWorld" component has been registered but not used vue/no-unused-components
05-16
这些错误信息是关于模块...同时，还有一个关于 `HelloWorld` 组件的警告，它表示你已经在代码中注册了这个组件，但是并没有使用它。你可以检查你的代码中是否真的需要使用这个组件，如果不需要，可以将其从代码中删除。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值