angular4路由守卫之CanDeactivate浏览器回退history问题

最新推荐文章于 2023-09-15 00:21:30 发布
最新推荐文章于 2023-09-15 00:21:30 发布
阅读量2.1k 收藏
点赞数 2
分类专栏： angular 文章标签： angular 路由守卫 CanDeactivate angular4 浏览器回退
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34749609/article/details/87785287
版权

angular4路由守卫之CanDeactivate浏览器回退history问题

问题描述

因项目需求需控制路由跳转，检查当前页是否有模态窗存在，如果有则关闭，没有则正常跳转路由。这个过程中发现angular4的CanDeactivate无法阻止浏览器的历史路径的改变，虽然路由没有改变，但是浏览器的history已经改变了，致使当关闭模态窗第二次点击浏览器回退的时候，直接回退了两个页面，也就是window.history.go(-2)了。（实际上，经过我多番查找资料，直到今天的angular7这个问题还是依然存在的，所以记录一下）

解决方案

在这里插入图片描述
参考资料：https://github.com/angular/angular/issues/13586

前端路上的蚂蚁
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Angular路由守卫 canDeactivate
weixin_43718291的博客
05-14 1865
引言 在企业应用中权限、复杂页多路由数据处理、进入与离开路由数据处理这些是非常常见的需求。 当希望用户离开一个正常编辑页时，要中断并提醒用户是否真的要离开时，如果在Angular中应该怎么做呢？ 其实Angular路由守卫属性可以帮我们做更多有意义的事，而且非常简单。 什么是路由守卫？ Angular 的 Route 路由参数中除了熟悉的 path、component 外，还包括四种是否允许路由激活与离开的属性。 canActivate 控制是否允许进入路由。 canActivateChild 等同 can
CanActivate、CanDeactivate和Resolve用法
weixin_45003344的博客
09-09 1573
路由守卫 1.只有当用户已经登录并拥有某些权限时才能进入某些路由 2.一个由多个表单组件组成的向导，例如注册流程，用户只有在当前路由的组件中填写了满足要求的信息才可以导航下一个路由 3.当用户执行保持操作而试图离开当前导航时提醒用户 1.CanActivate:处理导航到某路由的情况 这里的例子是当满足某种情况才允许进入路由 在这里新创建一个目录，里面...
angular知识点--路由（二）路由守卫
fupo
09-20 563
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结学习内容：学习时间：学习产出： 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
angular6 中路由守卫 CanActivate和CanDeactivate
weixin_44781409的博客
11-29 1069
1. CanActivate 路由进入 新建守卫 auth-guard.service.ts 文件 import { CanActivate } from '@angular/router'; export class LoginGuard implements CanActivate { canActivate () { let loggedIn: boolean = Math...
angular自定义服务 历史回退到“上一个页面”
黄彪博客
09-07 4666
在实际项目中，某个页面的入口可能是有多个，但是用户回退的时候，是希望进入之前进来的界面，这样就需要浏览器记住进来的界面   解决办法一（使用历史回退）： 代码如下 $scope.goBack = function(){ window.history.back(); };   上面的解决方案存在缺陷，应用场景如下： A 进入 B页面，B回退到A界面，能够正常显示 A 进入 B页
详解Angular路由之路由守卫
08-27
Angular 路由守卫详解 Angular 路由守卫是 Angular 路由系统中的一种机制，用于控制用户是否可以进入或离开某个路由。路由守卫可以根据用户的身份、权限或其他条件来判断用户是否可以访问某个路由。 一、路由守卫...
Angular8路由守卫原理和使用方法
12-12
Angular中路由守卫可以借此处理一些权限问题，通常应用中存储了用户登录和用户权限信息，遇到路由导航时会进行验证是否可以跳转。 4种守卫类型 按照触发顺序依次为：canload（加载）、canActivate（进入）、...
Angular4_ 返回上一页
热门推荐
Martin 的博客
05-08 1万+
最简单的实现方法。。。<button (click)="goBack()" class="btn btn-outline-info" style="float:left;width:180px">Back</button>goBack() { history.go(-1); }如果想保留数据。可以选择路由复用链接：点击打开链接可能出现的错误：点击打开链接...
Angular使用路由复用实现返回上一个页面不刷新
QQMESSI
12-31 3641
       当从列表进入详情后再返回时我们期望是页面不刷新的。在我不知道路由复用之前想要实现这个功能，我的解决方案是把一些条件存在session中，然后在ngOnInit()中去读取session再应用到页面中，这样实现了假的不刷新，但是后来发现当列表中含有大量筛选条件时，如果继续使用session的话要存好多东西。然后我就搜了一下，发现有路由复用这个概念。 路由复用存在以下几个状态： shouldReuseRoute 适用于在路由之间
Angular路由——路由守卫
weixin_34384557的博客
05-09 517
一、路由守卫 当用户满足一定条件才被允许进入或者离开一个路由。 路由守卫场景： 只有当用户登录并拥有某些权限的时候才能进入某些路由。 一个由多个表单组成的向导，例如注册流程，用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由。 当用户未执行保存操作而试图离开当前导航时提醒用户。 Angular提供了一些钩子帮助控制进入或离开路由。这些钩子就是路由守卫，可以通过这些钩子...
angualr：history使用的一点笔记
最新发布
Cloud Flower的博客-专注unity
09-15 292
angular中，因为是spa，所以history.length永远是angular界面初始化的一个固定值，不会改变的。
Angular 路由使用整理（一）
天马3798
01-20 7053
Angular的路由器能让用户从一个视图导航到另一个视图。 Angular2以及以后的版本路由器使用浏览器的history.pushState 进行导航，这样就和多网页应用链接保持一致了，而不是Angular1.x中还用hash(#)风格处理前端路由。 一、基础知识 <base href> 大多数带路由的应用都要在index.html的标签下先添加一个元素，来告诉路由器该如何合
angular 路由守卫 CanActivate和CanDeactivate
xinbear的博客
04-10 1万+
1. CanActivate 路由进入    新建守卫focusGuard.ts文件import { CanActivate } from '@angular/router'; export class LoginGuard implements CanActivate { canActivate () { let loggedIn: boolean = Math.random(...
angular路由守卫
涂涂
07-10 4189
路由守卫是指当用户满足了某些要求之后才可以离开或者进入某个页面或者场景的时候使用。比如说只有当用户填写了用户名和密码之后才可以进入首页，比如说用户离开某个页面时明月保存信息提示用户是否保存信息后再离开等操作，控制这些要求的就叫路由守卫。  1.CanActivate 进入路由守卫 这种守卫是指用户必须满足某些要求后才可以进入路由。比如注册登录 首先建立一个守卫文件guard，在文件里面建一个
angular7项目使用nginx部署并使用H5(无#)history模式
yw00yw的博客
08-27 1572
前言 前面的项目都是使用hash模式，即带#来访问的。 不同模式（h5 history 和 hash #）两种模式之间的切换，在angular中做如下配置即可： app.module.ts import { LocationStrategy, HashLocationStrategy, PathLocationStrategy } from '@angular/common'; provider...
Angular2语法快速指南
不断成长的我
11-15 1万+
Angular for TypeScript 语法快速指南 (基于2.0.0版本) 引导 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic
angular路由笔记_详解angular笔记路由之angular-router
weixin_39743603的博客
12-18 246
本文介绍了angular笔记路由之angular-router，分享给大家，具体如下：创建项目ng new router --routing\\ 加routing参数\\ 会新增一个app-routing.module.ts 文件路由的基本使用名称简介routes路由的配置，保存着哪一个url对应展示哪一个组件和在哪一个routeroutler展示routeroutler在html中标记路由内容呈...
angular路由回退
05-04
在Angular中，可以使用`Location`服务来实现路由回退。该服务提供了一个`back()`方法，它会导航到浏览器的历史记录中的前一个页面。 在你的组件中，你需要注入`Location`服务，并在需要回退的时候调用`back()`方法...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值