在Angular 8路由器中，父路由在导航到其他父路由时保持不变

的概念是路由保持。路由保持是指在导航到其他父路由时，保持当前父路由的状态和组件不变。

路由保持的优势是可以提供更好的用户体验，当用户从一个父路由导航到另一个父路由时，可以保持当前页面的状态，避免重新加载和重新渲染页面，提高页面加载速度和响应性能。

路由保持适用于以下场景：

当用户在父路由中填写表单或进行其他操作时，导航到其他父路由后可以保留用户输入的数据，避免数据丢失。
当用户在父路由中查看大量数据或进行复杂计算时，导航到其他父路由后可以避免重新加载和重新计算数据，提高页面响应速度。
当用户在父路由中进行了一系列操作后，导航到其他父路由后可以保持操作的状态，方便用户返回到之前的操作步骤。

在Angular 8中，可以通过使用RouteReuseStrategy来实现路由保持。RouteReuseStrategy是一个接口，可以自定义路由重用策略。通过实现RouteReuseStrategy接口的shouldReuseRoute方法，可以控制是否重用路由。

腾讯云提供的相关产品是腾讯云服务器（CVM）和腾讯云负载均衡（CLB）。腾讯云服务器提供了稳定可靠的云服务器实例，可以用于部署和运行Angular应用程序。腾讯云负载均衡可以实现流量分发和负载均衡，提高应用程序的可用性和性能。

腾讯云服务器（CVM）产品介绍链接地址：https://cloud.tencent.com/product/cvm 腾讯云负载均衡（CLB）产品介绍链接地址：https://cloud.tencent.com/product/clb

相关·内容

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

为了满足这些要求，您将添加Angular路由器到应用程序。有关路由器的更多信息，请阅读路由和导航页面。当你完成这个页面，应用程序应该看起来像这个实例（查看源代码）。...由于路由器在自己的包中，首先将该包添加到应用的pubspec： ? 并非所有的应用程序都需要路由，这就是为什么Angular路由器处于独立的可选软件包中的原因。...component（组件）：此路由导航时到（HeroesComponent）时将被激活的组件。在路由和导航页面阅读更多关于定义路由的信息。...从英雄名单到选定的英雄。从“深层链接”网址粘贴到浏览器地址栏中。路由到英雄细节您可以在AppComponent中添加到HeroDetailComponent的路由，其中定义了其他路由。...你走过的路以下是您在此页面中所取得的成果：您添加了Angular路由器来浏览不同的组件。您了解了如何创建路由器链接来表示导航菜单项。您使用路由器链接参数导航到用户选择的英雄的细节。

17.5K3 0

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

导航是很简单的，只是不同页面之间的切换，路由是实现导航的一种。一个url对应的一个页面，在angular2中是一个组件。定义一个规则。...在展示父路由的位置中的某个地方展示子路由对应的地方。路由模块最开始的路由，我们是直接写在app.module.ts文件中的，像这样，我们可以实现简单的导航。...可以在路由配置中添加守卫来进行处理。守卫可以返回一个boolean值，为true时，导航过程继续，为false时，导航被取消，当然这时候也可以被导航到其他页面。...路由器支持多种守卫用CanActivate来处理导航到某路由的情况。用CanActivateChild处理导航到子路由的情况。用CanDeactivate来处理从当前路由离开的情况。...在等待服务器的答复时，我们没法阻塞它 —— 这在浏览器中是不可能的。我们只能用异步的方式在等待服务器答复之前先停止导航。我们需要CanDeactivate守卫。

3.2K1 0

AngularDart 4.0 高级-路由概述顶

这是路由器页面的DRAFT，它仍在积极更新。大部分内容都是准确的，但样本仍在改进和增强。欢迎反馈。当用户执行应用程序任务时，Angular路由器支持从一个视图导航到下一个视图。...本指南涵盖路由器的主要功能，通过演示可以实时运行的小应用程序（查看源代码）演示它们。概观浏览器是一种熟悉的应用程序导航模型：在地址栏中输入一个URL，然后浏览器导航到相应的页面。...它可以将浏览器URL解释为导航到客户端生成视图的指令。它可以将可选参数传递给支持视图组件，以帮助确定要呈现的具体内容。您可以将路由器绑定到页面上的链接，并在用户单击链接时导航到适当的应用程序视图。...当用户点击按钮，从下拉框中选择，或者响应来自任何来源的其他刺激时，您都可以进行命令式导航。并且路由器在浏览器的历史记录中记录活动，所以后退和前进按钮也起作用。...路由器插座当此应用的浏览器URL成为/#/heroes时，路由器将该URL与名为Heroes的RouteDefinition匹配，并在放置在宿主视图HTML中的RouterOutlet后显示HeroesComponent

6.1K2 0

Vue-Router学习笔记，持续记录

导航守卫是路由跳转过程中的一些钩子函数，路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿的时机，这就是导航守卫。...在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数，可以在这个守卫中请求服务端获取数据，当成功获取并能进入路由时，调用next并在回调中通过 vm访问组件实例进行赋值等操作，（next中函数的调用在...Vue-router4.x 在setup获取当前路由和路由器对象 1.useRoute，返回当前路由地址。相当于在模板中使用 $route。必须在 setup() 中调用。...例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现： 1.导航完成之后获取先完成导航，然后在接下来的组件生命周期钩子中获取数据。...也就是假设A是路由a的访问的组件，A内有一个子组件内有router-view组件，a路由下面还有子路由；访问a的子路由时，会渲染到A的子组件的router-view 14.如何让父组件不渲染？

9.1K4 0

angular4实战（2） router

这样做的理由是，为了在页面多了之后方便管理，层级上面一定要分明，不能扁平化，所有的东西都一股脑的挂在app下面。通过引入stones路由，再让stones路由去管理其他的子路由是一个不错的选择。...（ps：项目本身一直在写，之后可能有所改变，但思路不变，不直接通过app根节点去管理）在路由的具体的配置方面： {path: '', redirectTo: '/login', pathMatch:...'full'} redirectTo表示在页面路由为空时（一般是刚进入项目），会重定向到login页面。...{path: '**', component: NotFoundComponent} 路由是根据path自上而下匹配的，如果说浏览器中的地址上的路由变成一个不存在的值时，那么会一直向下匹配，直到匹配到*...这时路由守卫就派上了用场。用CanActivate来处理导航到某路由的情况。用CanDeactivate来处理从当前路由离开的情况.

5353 0

Angular快速学习笔记（2） -- 架构

比如，要在你的应用中使用路由器（Router）服务，就要导入 Router 这个 NgModule。 1.1.1 定义一个模块一个NgModule就是一个使用@NgModule 装饰器的类。...但是，任何模块都能包含任意数量的其它组件，这些组件可以通过路由器加载，也可以通过模板创建。那些属于这个 NgModule 的组件会共享同一个编译上下文环境。 ?...你可以在模块中或者组件中注册这些提供商。 - 当你往根模块中添加服务提供商时，服务的同一个实例会服务于你应用中的所有组件。...1.4 路由（Routing） Angular 的 Router 模块提供了一个服务，它可以让你定义在应用的各个不同状态和视图层次结构之间导航时要使用的路径。...它的工作模型基于人们熟知的浏览器导航约定：在地址栏输入 URL，浏览器就会导航到相应的页面在页面中点击链接，浏览器就会导航到一个新页面点击浏览器的前进和后退按钮，浏览器就会在你的浏览历史中向前或向后导航

5.2K2 0

Angular2学习记录-给后端程序员的经验分享

3.1滚动监听要实现页面滚动后导航栏会变色的效果,如下图(图来自我的csdn博客,没找到其他好图床) ?...angular2的路由匹配规则是从根路由也就是forRoot()的这个开始.在该处匹配寻找规则....,找到其跳转到IndexComponent,完成任务访问/aust.则先在根路由找,发现需要到子路由里面寻找,到子路由后,在children中发现被重定向到/index,那么回到根路由,找到IndexComponent...['id'],另外可以使用订阅模式queryParamMap.subscribe(),路由参数更新时自动通知 3.5组件通信父->子:子组件使用input装饰器,接受父组件的属性,并且可使用ngOnChanges...子->父:使用output装饰器加EventEmitter向上弹出事件到父组件,父组件监听后处理.

3.1K2 0

后端小白的 Vue 入门笔记 —— 进阶篇

数据的交互@click 8. 消息订阅,打破父子组件信息传递的约束 9. 异步请求 10. 路由: 10.1. 定义路由器 10.2. 使用路由进行页面的跳转 10.3....像下面那样，进行组件之间的数据传递在父组件中给子组件传递方法或数据使用：强制数据绑定的方法，ChildTarget 是我们在 components 模块将子组件映射得来的子组件标签，name 可以是...router 的文件夹中，而且，它的编码基本上是机械化的编码，分为如下几步引入 Vue，VueRouter 声明 Vue.use(VueRouter) 引入路由组件对外暴露路由器对象，并且把路由组件配置进路由器对象...例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b 10.3 回退到上一个路由我们可以在按钮上添加下面的动作，是路由回退一级 <button...，举个例子，我们使用手机 qq，最下面有几个导航栏，点击不同的按钮转换到不同的页面去，如果用编程式的路由导航就很好做第一步就是将需要的路由组件配置进路由器 给按钮绑定上点击事件点击事件触发我们所谓的编程式路由导航

2K2 0

10个关于 Vue 的高级开发技巧

2、使用 Vue-Router 数据实现更智能的导航链接你可能没有意识到，但是 Vue-Router 可以像任何其他数据存储一样使用。...=== $route.matched[0].name )" 使用此 v-for，您可以直接在模板中访问路由器树的所有子路由和单个路由元数据。...我最近在一个项目中使用它来生成动态侧边栏导航组件。我在路由器中的某些路由上设置了一个 showInSidebar 元数据属性，我想隐藏在侧边栏中。...以下是我设置路由器路由的方法： ? 客户端还有一个额外的要求，他们不仅需要从路由器生成这些侧边栏路由，还需要从他们的 API 数据生成这些侧边栏路由。...5、路线更改时滚动到顶部当更改路线ni时，Vue 会保持在页面上的当前位置。这有时很有用，但主要是麻烦。如果向下滚动一个长列表，然后转到另一个页面，滚动条将位于新页面的底部，而不是期望的顶部。

6.1K1 0

11 个高级 Vue 编码技巧

一旦我们把它作为一个组件，我们就可以使用把它放到我们应用程序的任何其他组件或页面中：在上面的示例中，当我将鼠标悬停在 SVG 上时，我只是在要更改的部分上设置一个类（此处称为...2、使用 Vue-Router 数据实现更智能的导航链接你可能没有意识到，但是 Vue-Router 可以像任何其他数据存储一样使用。...=== $route.matched[0].name )" 使用此 v-for，您可以直接在模板中访问路由器树的所有子路由和单个路由元数据。...我最近在一个项目中使用它来生成动态侧边栏导航组件。我在路由器中的某些路由上设置了一个 showInSidebar 元数据属性，我想隐藏在侧边栏中。...5、路线更改时滚动到顶部当更改路线ni时，Vue 会保持在页面上的当前位置。这有时很有用，但主要是麻烦。如果向下滚动一个长列表，然后转到另一个页面，滚动条将位于新页面的底部，而不是期望的顶部。

2.5K2 0

11 个高级 Vue 编码技巧

2.6K3 0

10个关于 Vue 的高级开发技巧

2、使用 Vue-Router 数据实现更智能的导航链接你可能没有意识到，但是 Vue-Router 可以像任何其他数据存储一样使用。...=== $route.matched[0].name )" 使用此 v-for，您可以直接在模板中访问路由器树的所有子路由和单个路由元数据。...我最近在一个项目中使用它来生成动态侧边栏导航组件。我在路由器中的某些路由上设置了一个 showInSidebar 元数据属性，我想隐藏在侧边栏中。...在我的 SideNavbar 组件模板中：你可能已经注意到了exact-active-class代码：有了这个，如果路由器链接的目的地与当前路由匹配，Vue 会自动设置一个活动类。...5、路线更改时滚动到顶部当更改路线ni时，Vue 会保持在页面上的当前位置。这有时很有用，但主要是麻烦。如果向下滚动一个长列表，然后转到另一个页面，滚动条将位于新页面的底部，而不是期望的顶部。

6K2 0

Blazor 中的路由和路由模板

此外，正如在 ASP.NET MVC 中发生的那样，解析 URL 时，表中的路由将从最具体到最不具体进行评估，并且搜索在首次匹配时停止。...在客户端上，路由器参与多种情况，最常见的情况是用户单击链接、表单上的提交按钮或下拉列表中触发服务器调用的项。路由器绑定到内部位置更改事件，并从客户端处理导航到新请求路径的整个过程。...路由器的实现是通过 SPA 框架（其中 Angular 最为出色）移动到客户端的。让我们花点时间对合并的 Angular 路由器和仍在使用的 Blazor 路由器中的功能进行简要比较。...与 Angular 路由器不同，它在获取路由参数后无法异步运行解析步骤。最后，Blazor 路由器不支持条件重定向到备用路由 - 这也是 Angular 路由器可以做到的。...但是，在 Blazor 中，路由器可以在不离开客户端的情况下进行导航，无需从服务器完全重新加载内容。缺少的功能 Blazor 框架是一个极具吸引力的软件，但很多功能仍然在开发中。

8.3K2 1

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

一、Overview Angular 入坑记录的笔记第五篇，因为一直在加班的缘故拖了有一个多月，主要是介绍在 Angular 中如何配置路由，完成重定向以及参数传递。...至于路由守卫、路由懒加载等“高级”特性，并不会在本篇文章中呈现对应官方文档地址：路由与导航配套代码地址：angular-practice/src/router-tutorial 二、Contents...在 Angular 项目中，系统的路由需要我们将一个 url 地址映射到一个展示的组件，因此需要手动的去设置 url 与组件之间的映射关系因为我们在使用 Angular CLI 创建项目时，选择了添加路由模组...4.1.3、重定向与通配地址在普遍情况下，对于进入系统后的默认路径，我们会选择重定向到一个具体的地址上，这里我们在定义路由信息时，定义了一个空路径用来表示系统的默认地址，当用户请求时，重定向到 /home...4.2、路由间的参数传递在进行路由跳转时，很常见的一种使用情况是我们需要将某些数据作为参数传递到下一个页面中，例如从列表中选择点击某一行数据，跳转到对应的详情页面常见的参数传递有如下的两种方式 4.2.1

4.2K5 0

深入Vue.js：从基础到进阶的全面学习指南

在现代前端开发中，Vue.js与React、Angular并列，成为三大主流框架之一。 Vue.js的历史和版本演进 Vue.js由尤雨溪（Evan You）在2014年创立，最初的版本是1.0。...' }); 然后可以在Vue实例中使用该组件：插槽插槽用于在父组件中向子组件传递内容，主要分为默认插槽和具名插槽： <template...: About } ]; const router = new VueRouter({ routes }); 然后将路由器实例注入到Vue实例中： new Vue({ router, render...$route.params.id; 嵌套路由使用嵌套路由可以在父路由组件中嵌套子路由： const routes = [ { path: '/user/:id', component: User,...路由守卫用于控制导航行为，可以在导航前、导航后、或取消导航时执行特定操作： const router = new VueRouter({ routes }); router.beforeEach

561 0

Angularjs中UI Router超级详细的教程{{上}}

这些跳转的子页面，在路由设置中，可能被称为parent.son1, parent.son2...这就是state的嵌套。...--会导航到默认路由上 $urlRouterProvider.otherwise('home'); 即 .state('content.home',{ url: 'home', views:{ "body...使用控制器在实际项目中，数据大多从controller中来。首先在路由中设置state所用到的控制器以及控制器别名。...$$childTail.ctrPhotoList在父state中的controller中拿到子state中的controller；通过$scope....$parent.ctrPhoto在子state中的controller中拿到父state中的controller。

5.2K5 0

AngularDart 4.0 高级-生命周期钩子顶

在第一次NgDoCheck之后调用一次。组件独有的钩子。 ngAfterContentChecked 在Angular检查投影到组件中的内容之后作出响应。...在Angular摧毁指令/组件之前调用。其他生命周期挂钩其他Angular子系统除了这些组件钩子可能有自己的生命周期钩子。...例如，路由器也有自己的路由器生命周期挂钩，可以让我们利用路由导航中的特定时刻。可以在ngOnInit和routerOnActivate之间绘制一个平行线。...在此示例中，每次父组件递增其输入计数器属性时，CounterComponent都会记录更改（通过ngOnChanges）。...这一次，它不是在模板中包含子视图，而是从AfterContentComponent的父项导入内容。这是父母的模板。

6.1K1 0

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

对应官方文档地址：路由与导航配套代码地址：angular-practice/src/router-combat 二、Contents Angular 从入坑到弃坑 - Angular 使用入门 Angular...从入坑到挖坑 - 组件食用指南 Angular 从入坑到挖坑 - 表单控件概览 Angular 从入坑到挖坑 - HTTP 请求概览 Angular 从入坑到挖坑 - Router 路由使用入门指北...UrlTree：取消当前的导航，并导航到路由守卫返回的这个 UrlTree 上（一个新的路由信息） 4.2.1、CanActivate：认证授权在实现路由守卫之前，可以通过 Angular CLI...这里的问题与配置通配路由需要放到最后的原因相似，因为脚手架在帮我们将创建的模块导入到 app.module.ts 中时，是添加到整个数组的最后，同时因为我们已经将 crisis 模块的路由配置移动到专门的...，也就是在该路由首次被请求时执行，在后续请求时，该模块和路由都是立即可用的 4.3.2、CanLoad：杜绝未通过认证授权的组件加载在上面的代码中，对于 CrisisModule 模块我们已经使用 CanActivate

3.7K3 0

【转载】【ionic+angularjs】angularjs ui-router路由简介

如果你想定制与URL同步的行为（例如，你需要保持当前的URL去并且推迟一个变化），那么在配置的时候使用这个方法。参数： defer：boolean，确定是禁止还是启用该拦截。...$stateProvider 处理路由状态的服务，路由的状态反映了该项在应用程序中的位置，描述了在当前状态下UI是应该怎么样的，并且该做什么。...在ngRoute中resolve选项可以允许开发者在路由到达前载入数据保证（promises）。在使用这个选项时比使用angular-route有更大的自由度。...预载入选项需要一个对象，这个对象的key即要注入到控制器的依赖，这个对象的value为需要被载入的factory服务。如果传入的时字符串，angular-route会试图匹配已经注册的服务。...url: '/current_details' }); }, //前一个数据保证也可作为依赖注入到其他数据保证中

7.4K7 0

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

7.2K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

在Angular 8路由器中，父路由在导航到其他父路由时保持不变

相关·内容

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

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

AngularDart 4.0 高级-路由概述顶

Vue-Router学习笔记，持续记录

angular4实战（2） router

Angular快速学习笔记（2） -- 架构

Angular2学习记录-给后端程序员的经验分享

后端小白的 Vue 入门笔记 —— 进阶篇

10个关于 Vue 的高级开发技巧

11 个高级 Vue 编码技巧

11 个高级 Vue 编码技巧

10个关于 Vue 的高级开发技巧

Blazor 中的路由和路由模板

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

深入Vue.js：从基础到进阶的全面学习指南

Angularjs中UI Router超级详细的教程{{上}}

AngularDart 4.0 高级-生命周期钩子顶

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

【转载】【ionic+angularjs】angularjs ui-router路由简介

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

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐