首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

(Angular 8)为什么不能重新加载强制重定向路由引用的路由?

在Angular 8中,路由的重新加载行为受到一些特定机制的影响,尤其是当涉及到强制重定向路由时。以下是关于这个问题的基础概念、原因以及可能的解决方案:

基础概念

  1. 路由重定向:在Angular中,路由重定向是指当用户尝试访问某个路由时,应用程序会自动将用户导航到另一个不同的路由。
  2. 强制重定向路由:这是一种特殊的路由配置,它总是将用户从一个URL重定向到另一个URL,无论用户是否已经访问过原始URL。

原因

Angular的路由系统是基于单页面应用程序(SPA)模型的,这意味着整个应用程序作为一个单一的HTML页面加载,并且路由的变化是通过JavaScript动态更新浏览器的历史记录栈来实现的。当涉及到强制重定向路由时,Angular的路由守卫和路由器服务可能会阻止路由的重新加载,因为它们认为没有必要重新加载已经处理过的路由。

解决方案

要解决这个问题,可以尝试以下几种方法:

方法一:使用routerLink指令

在模板中使用routerLink指令而不是通过编程方式导航到路由。这有时可以触发浏览器的重新加载行为。

代码语言:txt
复制
<a routerLink="/your-route" routerLinkActive="active">Go to Your Route</a>

方法二:手动触发路由事件

通过监听路由事件并在适当的时候手动触发路由的重新加载。

代码语言:txt
复制
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private router: Router) {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    // 在这里执行重新加载逻辑
    window.location.reload();
  });
}

方法三:使用router.navigateByUrl

使用router.navigateByUrl方法而不是router.navigate,因为前者有时可以触发浏览器的重新加载。

代码语言:txt
复制
this.router.navigateByUrl('/your-route', { skipLocationChange: true }).then(() => {
  this.router.navigate(['/your-route']);
});

方法四:自定义路由守卫

创建一个自定义的路由守卫,在其中处理路由的重定向逻辑,并确保在适当的时候允许路由的重新加载。

代码语言:txt
复制
@Injectable({ providedIn: 'root' })
export class CustomRedirectGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 自定义重定向逻辑
    if (需要重定向) {
      this.router.navigate(['/new-route']);
      return false;
    }
    return true;
  }
}

然后在路由配置中使用这个守卫:

代码语言:txt
复制
const routes: Routes = [
  { path: 'your-route', component: YourComponent, canActivate: [CustomRedirectGuard] }
];

通过这些方法,可以解决Angular 8中强制重定向路由无法重新加载的问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 英雄之旅-教程-07路由 顶

在进行更改时,请通过重新加载浏览器窗口来保持运行。 行动计划 计划如下: 将AppComponent转换为仅处理导航的应用程序外壳程序。...路由是导航的另一个名称。 路由是导航从视图到视图的机制。 分割AppComponent 当前的应用程序加载AppComponent并立即显示英雄列表。...由于路由器在自己的包中,首先将该包添加到应用的pubspec: ? 并非所有的应用程序都需要路由,这就是为什么Angular路由器处于独立的可选软件包中的原因。...RouterLink指令告诉路由在用户点击链接时的位置。 您使用链接参数列表定义了一个路由指令, 这个列表在我们的小样本中只有一个元素,引用的路由名称。...在浏览器中,转至应用程序根目录(/)并重新加载。 该应用程序显示dashboard ,您可以在dashboard 和heroes之间导航。

17.6K30
  • Angular2 之 路由与导航基础知识路由模块组件路由路由守卫

    导航是很简单的,只是不同页面之间的切换,路由是实现导航的一种。 一个url对应的一个页面,在angular2中是一个组件。定义一个规则。...路由是从@angular/router包中引入的。 路由都是需要进行配置的。而这个配置需要的也就是RouterModule模块。 一个路由配置 path中不能用斜线/开头。...如果当前URL无法匹配上我们配置过的任何一个路由中的路径,路由器就会匹配上这一个。当需要显示404页面或者重定向到其它路由时,该特性非常有用。... CanActivate 使用CanActivate来处理导航路由,需要在路由配置中,添加导入AuthGuard类,修改管理路由并通过CanActivate属性来引用AuthGuard。...当用户要导航到外面时,该怎么处理这些既没有审核通过又没有保存过的改动呢? 我们不能马上离开,不在乎丢失这些改动的风险,那显然是一种糟糕的用户体验。 我们应该暂停,并让用户决定该怎么做。

    3.3K10

    Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

    Angular 2中的路由工作原理是什么? 路由是能够让用户在视图/组件之间导航的机制。Angular 2简化了路由,并提供了在模块级(延迟加载)下配置和定义的灵活性。 ...在成功匹配时,它会应用重定向,此时路由器会构建ActivatedRoute对象的树,同时包含路由器的当前状态。在重定向之前,路由器将通过运行保护(CanActivate)来检查是否允许新的状态。...启用延迟加载的Plunkr示例:  我们不需要在根模块中导入或声明延迟加载模块。 将路由添加到顶层路由(app.routing.ts)并设置loadChildren。...#best-practices 8.  如何优化Angular 2应用程序来获得更好的性能? 优化取决于应用程序的类型和大小以及许多其他因素。...此外,还可以相对很好地管理shadow DOM,同时检测Angular 2应用的改变,并且可以有效地管理视图的重新绘制。

    17.4K80

    Angular 从入坑到挖坑 - Router 路由使用入门指北

    一、Overview Angular 入坑记录的笔记第五篇,因为一直在加班的缘故拖了有一个多月,主要是介绍在 Angular 中如何配置路由,完成重定向以及参数传递。...至于路由守卫、路由懒加载等“高级”特性,并不会在本篇文章中呈现 对应官方文档地址: 路由与导航 配套代码地址:angular-practice/src/router-tutorial 二、Contents...,这里我们在定义路由信息时,定义了一个空路径用来表示系统的默认地址,当用户请求时,重定向到 /home 路径上,因为只有完整的 url 地址匹配空字符串时才应该进行重定向操作,所以这里需要指定匹配模式是全部匹配...从截图中可以看到,当我们打开系统时,会自动跳转到我们指定的 home 路径,点击菜单按钮后,则会加载对应的组件页面 4.1.4、激活的路由 很多情况下,对于被选中的路由,我们可能会添加一个特定的样式来进行提示用户...-- 加载子路由的数据 --> 子路由组件渲染的出口 ?

    4.2K50

    前端知识点总结vue篇(下)

    当页面加载完成之后,利用路由实现HTML内容的变换,UI与用户 的交互,而不会因为用户的操作进行页面的重新加载或跳转 优点: 用户体验感好,避免了不必要的跳转和重复渲染 SPA对服务器压力小 前后端职责分离...缺点: 初次加载耗时多,将JS、HTML、CSS统一加载 前进后退靠路由,不能使用浏览器的前进后退 SEO难度大 3....Vue中为什么data是一个函数 因为组件是用来复用的,而js里对象是引用关系,如果组件中data是一个对象,那么作用域没有隔离,子组件中的data属性值 会相互影响。...,做 刷新操作会出现404错误,需要和后端配合配置一下Apache或是nginx的重定向,重定向到路由首页) abstract模式: 支持所有的JS运行环境。...如果发现没有浏览器的API,路由会自动强制进入这个模式。 Hash和history区别 Hash的URL会更改、浏览器可以前进和后退,但浏览器不会刷新并且不会和服务端交流。

    36320

    起步 - vue-router路由与页面间导航

    ,这种模式充分利用了history.pushState API来完成URL的跳转而无需重新加载页面 , 如果不使用history模式,当访问rank的时候路由就会变成: http://localhost...如果发现没有浏览器的API,路由就会强制进入这个模式 路由与导航 关键词:"router-link" , "router-view" vue-router提供两个指令标签组件来处理这个导航与自动渲染逻辑...在路由使用时要明确一个原则就是:不直接引用路由定义,(即不要在router-link直接通过 to='conpontents/rank/rank' 来导向路由),当显式引用路由定义的URL一旦发生变化,...所有引用的地方都要修改。..."/"开头的嵌套路径会被当做根路径,所以不要在子路由上加上"/"; 重定向路由与别名 关键词:"redirect","alias" 重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到

    1.4K100

    起步 - vue-router路由与页面间导航

    ,这种模式充分利用了history.pushState API来完成URL的跳转而无需重新加载页面 , 如果不使用history模式,当访问rank的时候路由就会变成: http://localhost...如果发现没有浏览器的API,路由就会强制进入这个模式 路由与导航 关键词:"router-link" , "router-view" vue-router提供两个指令标签组件来处理这个导航与自动渲染逻辑...在路由使用时要明确一个原则就是:不直接引用路由定义,(即不要在router-link直接通过 to='conpontents/rank/rank' 来导向路由),当显式引用路由定义的URL一旦发生变化,...所有引用的地方都要修改。..."/"开头的嵌套路径会被当做根路径,所以不要在子路由上加上"/"; 重定向路由与别名 关键词:"redirect","alias" 重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到

    89000

    一文让你彻底搞懂 vue-Router

    vue-router 插件 2.2、配置路由 //配置路由与组件之间的关系 const route=[ { path: '/', // 当访问 '/'的时候 路由重定向 到新的地址...$router.addRoutes([]) 也可以添加动态路由,里面传的是一个数组,与 routes 配置一样。 7、路由的懒加载 懒加载通俗的讲就是使用的时候再加载,不使用的时候不加载。...主要作用就是将路由对应的组件打包成一个js代码块,只有路由访问的时候,才加载对应的 js 。 //直接引用的 import Home from '..../component/home') } } ] 8、嵌套路由 实际应用中,通常由多层嵌套的组件组合而成。 实现步骤: 第一:创建对应的子组件,并且在路由映射中配置对应的子路由。...11、keep-alive 切换路由的时候页面每次都会重新渲染,我们有的组件会存在一些数据需要保留,不希望来回切换时每次都重新渲染,所以就使用 keep-alive 包裹组件,这样只有第一次执行加载时会执行

    78320

    Angular 从入坑到挖坑 - 路由守卫连连看

    一、Overview Angular 入坑记录的笔记第六篇,介绍 Angular 路由模块中关于路由守卫的相关知识点,了解常用到的路由守卫接口,知道如何通过实现路由守卫接口来实现特定的功能需求,以及实现对于特性模块的惰性加载...,这里包含了对于路由的重定向、通配路由,以及通过动态路由进行参数传递的使用 import { NgModule } from '@angular/core'; import { Routes, RouterModule...:是否允许通过延迟加载的方式加载某个模块 在添加了路由守卫之后,通过路由守卫返回的值,从而达到我们控制路由的目的 true:导航将会继续 false:导航将会中断,用户停留在当前的页面或者是跳转到指定的页面...当问题解决后,就可以针对 crisis 模块设置惰性加载 在配置惰性路由时,我们需要以一种类似于子路由的方式进行配置,通过路由的 loadChildren 属性来加载对应的模块,而不是具体的组件,修改后的...,框架会通过 loadChildren 字符串来动态加载 CrisisModule,然后把 CrisisModule 添加到当前的路由配置中,而惰性加载和重新配置工作只会发生一次,也就是在该路由首次被请求时执行

    3.8K30

    【ionic+angularjs】angularjs ui-router路由简介($urlRouter、$state、$stateProvider、ui-sref....)

    之前有写过一篇关于Angular自带的路由:ngRoute。今天来说说Angular的第三方路由:ui-router。...那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router呢?...rule:你想重定向的url路径或一个返回的网址路径的规则函数。函数传入两个参数:$injector和$location服务,而且必须返回一个string的url。...参数: what:需要重定向的传入路径。 handler:你想要重定向的路径/处理程序。...reloadOnSearch:boolean,如果为false,那么当一个search/query参数改变时不会触发相同的状态,用于当你修改$location.search()的时候不想重新加载页面。

    7.3K40

    实施前端微服务化的六七种方式

    结合我最近半年在微前端方面的实践和研究来看,微前端架构一般可以由以下几种方式进行: 使用 HTTP 服务器的路由来重定向多个应用 在不同的框架之上设计通讯、加载机制,诸如 Mooa 和 Single-SPA...Angular Tabs 示例 如果这一类应用过于复杂,那么它必然是要进行微服务化的拆分。因此,在采用 iframe 的时候,我们需要做这么两件事: 设计管理应用机制 设计应用通讯机制 加载机制。...组合式集成:将应用微件化 组合式集成,即通过软件工程的方式在构建前、构建时、构建后等步骤中,对应用进行一步的拆分,并重新组合。...是的,现在我们需要完成使用 Web Components 来完成整个系统的功能。 上下游生态系统不完善。缺乏相应的一些第三方控件支持,这也是为什么 jQuery 相当流行的原因。 系统架构复杂。...中直接引用。

    2.3K20

    实施前端微服务化的方式

    结合我最近半年在微前端方面的实践和研究来看,微前端架构一般可以由以下几种方式进行: 使用 HTTP 服务器的路由来重定向多个应用 在不同的框架之上设计通讯、加载机制,诸如 Mooa 和 Single-SPA...Angular Tabs 示例 如果这一类应用过于复杂,那么它必然是要进行微服务化的拆分。因此,在采用 iframe 的时候,我们需要做这么两件事: 设计管理应用机制 设计应用通讯机制 加载机制。...组合式集成:将应用微件化 组合式集成,即通过软件工程的方式在构建前、构建时、构建后等步骤中,对应用进行一步的拆分,并重新组合。...缺乏相应的一些第三方控件支持,这也是为什么 jQuery 相当流行的原因。 系统架构复杂。当应用被拆分为一个又一个的组件时,组件间的通讯就成了一个特别大的麻烦。...中直接引用。

    1.2K10

    2020最新前端面试题_2020年前端面试题

    缩短了开发周期 21、项目性能优化 减少 HTTP 请求数 减少 DNS 查询 使用 CDN 避免重定向 图片懒加载 减少 DOM 元素数量 减少 DOM 操作 使用外部 JavaScript 和 CSS...初次加载时耗时多;页面复杂度提高很多。 21、Vue 项目中为什么要在列表组件中写 key,其作用是什么?...中的ng-repeat) v-show 显示内容 (同angular中的ng-show) v-hide 隐藏内容(同angular中的ng-hide) v-if 显示与隐藏 (dom元素的删除添加 同angular...key,key最好是id值,且避免同时使用 v-if 大数据列表和表格性能优化 - 虚拟列表 / 虚拟表格 防止内部泄露,组件销毁后把全局变量和时间销毁 图片懒加载 路由懒加载 异步路由 第三方插件的按需加载...预加载其实是声明式的 fetch ,强制浏览器请求资源, 并且不会阻塞 onload 事件,可以使用以下代码开启预加载 <link rel="preload" href="http://example.com

    6.7K10

    2022 最新 Vue 3.0 面试题

    (必会) 当页面第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩 子函数 8、请说下封装 Vue 组件的过程?...中组件 name 决定的 11、Vue 组件 data 为什么必须是函数(必会) 1、个组件都是 Vue 的实例 2、组件共享 data 属性,当 data 的值是同一个引用类型的值时,改变其中一个会影响其他...路由解耦 6、redirect : 重定向路由 51、编程式导航使用的方法以及常用的方法(必会) 1、路由跳转:this. router.push() 2、路由替换: this. router.replace...4、 不打包框架、库文件,通过 cdn 的方式引入 5、 小图片使用 base64 6、 配置项目文件懒加载 7、 UI 库配置按需加载 8、 开启 Gzip 压缩 61、使用 Vue 的时候一下加载造成页面卡顿...HTML、JavaScript 和 CSS,一旦页面加载完成了,SPA 不会因为用户的操作而进行页面的重新加载或跳转,取而 代之的是利用 JavaScript 动态的变换 HTML 的内容,从而实现

    15910
    领券