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

Angular路由在页面刷新时重定向到父路由而不是子路由

Angular路由是Angular框架中用于管理页面导航和路由的模块。在页面刷新时,Angular默认会重新加载整个应用程序,并且路由会回到根路由。如果希望在页面刷新时重定向到父路由而不是子路由,可以通过以下步骤实现:

  1. 在父路由的组件中定义一个空的子路由,并将其路径设置为**,表示匹配所有路径。
  2. 在父路由组件的模板中使用router-outlet指令来显示子路由的内容。
  3. 在父路由组件的构造函数中注入Router服务,并在ngOnInit生命周期钩子中使用Router服务的navigate方法将路由重定向到子路由。

下面是一个示例代码:

代码语言:txt
复制
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ParentComponent } from './parent.component';

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      {
        path: '**',
        redirectTo: '',
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

// parent.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <router-outlet></router-outlet>
  `,
})
export class ParentComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {
    this.router.navigate(['parent']);
  }
}

// child.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <h2>Child Component</h2>
  `,
})
export class ChildComponent {}

在上述示例中,当页面刷新时,会重定向到父路由/parent,然后父路由组件会自动加载并显示子路由组件的内容。

推荐的腾讯云相关产品和产品介绍链接地址如下:

以上是关于Angular路由在页面刷新时重定向到父路由而不是子路由的解答,希望能对您有所帮助。

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

相关·内容

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

isAddBackColor(){ if (this.getIsIndex()){ var self = this; //该处使用匿名函数,不是箭头函数....angular2的路由匹配规则是从根路由也就是forRoot()的这个开始.该处匹配寻找规则....,找到其跳转到IndexComponent,完成任务 访问/aust.则先在根路由找,发现需要到子路由里面寻找,路由后,children中发现被重定向/index,那么回到根路由,找到IndexComponent...['id'],另外可以使用订阅模式queryParamMap.subscribe(),路由参数更新自动通知 3.5组件通信 ->:组件使用input装饰器,接受组件的属性,并且可使用ngOnChanges...->:使用output装饰器加EventEmitter向上弹出事件组件,组件监听后处理.

3.1K20

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

Vue常用的修饰符 .prevent 提交事件不再重载页面 .stop 阻止单击事件冒泡 .self 当事件发生在该元素本身不是元素时会触发 .capture 事件侦听,事件发生时会调用 .once...(因为history模式改变URL方式会导致浏览器向服务器发送请求,因此要在服务器端 做处理,如果URL匹配不到任何静态资源,应该返回同一个index.html页面,这个页面就是app依赖的页面,访问二级页面...,做 刷新操作会出现404错误,需要和后端配合配置一下Apache或是nginx的重定向重定向路由首页) abstract模式: 支持所有的JS运行环境。...id=1,刷新页面id还存在。 params类似post,跳转之后url后面不会拼接参数,但是刷新页面id会消失。...q=params&spm=1001.2101.3001.7020) 刷新页面的时候参数会消失 可以考虑本地存储解决此问题 4.query传过来的参数会显示地址栏中 params传过来的参数不会显示地址栏中

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

    添加路由 应该在用户点击按钮后显示英雄不是自动显示。 换句话说,用户应该能够导航英雄列表。 更新pubspec 使用Angular路由angular_router)启用导航。...component(组件):此路由导航(HeroesComponent)将被激活的组件。 路由和导航页面阅读更多关于定义路由的信息。...回头看看路由配置,确定“Heroes”是HeroesComponent的路由的名字。 了解路由章节中的链接参数列表。 刷新浏览器,浏览器显示应用标题和英雄链接,但不是英雄列表。...路由和导航页面阅读有关默认路由重定向的更多信息。 将导航添加到dashboard  模板上添加dashboard 导航链接,heroes链接上方。...刷新浏览器并开始点击。 用户可以应用程序周围进行导航,从仪表板英雄详细信息,然后返回,从英雄列表英雄详细信息,再次回到英雄。 你已经达到推动这个页面的所有导航要求。

    17.6K30

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

    一、Overview Angular 入坑记录的笔记第五篇,因为一直加班的缘故拖了有一个多月,主要是介绍 Angular 中如何配置路由,完成重定向以及参数传递。...4.1.3、重定向与通配地址 普遍情况下,对于进入系统后的默认路径,我们会选择重定向一个具体的地址上,这里我们定义路由信息,定义了一个空路径用来表示系统的默认地址,当用户请求重定向 /home...4.2、路由间的参数传递 进行路由跳转,很常见的一种使用情况是我们需要将某些数据作为参数传递下一个页面中,例如从列表中选择点击某一行数据,跳转到对应的详情页面 常见的参数传递有如下的两种方式 4.2.1...4.3、嵌套路由 一些情况下,路由是存在嵌套关系的,例如下面这个页面,只有当我们点击资源这个顶部的菜单后,它才会显示出左侧的这些菜单,也就是说这个页面左侧的菜单的级菜单是顶部的资源菜单 ?...,因此当嵌套路由配置完成之后,嵌套的页面上,我们需要定义一个 标签用来指定子路由的渲染出口,最终的效果如下图所示 我是路由页面显示的内容

    4.2K50

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

    这里简单明了的说明下ngRoute和ui-router的区别吧,其实也没很大的区别,主要的就是ngRoute针对于单视图,ui-router可用于多视图(这里说的视图是指在页面内我们可控制的,可变化的区域...比如: 我们点击了一个link,我们需要在视图中跳转到指定的一个页面,那么ngRoute已经满足了我们的需求,当我们点击的时候,需要在分别在不同的地方跳转两个不同的页面的时候,ngRoute就不够用了..."parent.child">点我显示view与view内容 <!...ngRoute中resolve选项可以允许开发者路由到达前载入数据保证(promises)。使用这个选项比使用angular-route有更大的自由度。...预载入选项需要一个对象,这个对象的key即要注入控制器的依赖,这个对象的value为需要被载入的factory服务。 如果传入的字符串,angular-route会试图匹配已经注册的服务。

    7.4K70

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

    这里简单明了的说明下ngRoute和ui-router的区别吧,其实也没很大的区别,主要的就是ngRoute针对于单视图,ui-router可用于多视图(这里说的视图是指在页面内我们可控制的,可变化的区域...比如: 我们点击了一个link,我们需要在视图中跳转到指定的一个页面,那么ngRoute已经满足了我们的需求,当我们点击的时候,需要在分别在不同的地方跳转两个不同的页面的时候,ngRoute就不够用了..."parent.child">点我显示view与view内容 <!...ngRoute中resolve选项可以允许开发者路由到达前载入数据保证(promises)。使用这个选项比使用angular-route有更大的自由度。...预载入选项需要一个对象,这个对象的key即要注入控制器的依赖,这个对象的value为需要被载入的factory服务。 如果传入的字符串,angular-route会试图匹配已经注册的服务。

    7.3K40

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

    但因为没有 # 号,所以当用户刷新页面之类的操作,浏览器还是会给服务器发送请求。为了避免出现这种情况,所以这个实现需要服务器的支持,需要把所有路由重定向页面。...区别 url 展示上,hash 模式有“#”,history 模式没有 刷新页面,hash 模式可以正常加载到 hash 值对应的页面 history 没有处理的话,会返回 404,一般需要后端将所有页面都配置重定向首页路由...' }] 4.命名视图 命名视图用于同时展现多个路由视图,可以界面中拥有多个单独命名的视图,不是只有一个单独的出口。...重定向的路径可以是绝对路径也可以是相对路径; 路由可以不绑定组件;子路由会直接显示到上层组件; 13.组件的router-view 组件内写的router-view可以作为路由组件的渲染区域。...也就是假设A是路由a的访问的组件,A内有一个组件内有router-view组件,a路由下面还有子路由;访问a的子路由,会渲染A的组件的router-view 14.如何让组件不渲染?

    9.2K40

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

    -- 404 页面 ng g component page-not-found app-routing.module.ts 文件中完成对于项目路由的定义,这里包含了对于路由重定向、通配路由,...4.2、路由守卫 Angular 中,路由守卫主要可以解决以下的问题 对于用户访问页面的权限校验(是否已经登录?已经登录的角色是否有权限进入?)...跳转到组件前获取某些必须的数据 离开页面,提示用户是否保存未提交的修改 Angular 路由模块提供了如下的几个接口用来帮助我们解决上面的问题 CanActivate:用来处理系统跳转到到某个路由地址的操作...这里其实相当于将原先两级的路由模式(:crisis-list,:crisis-detail)改成了三级(:crisis-list,:' '(空路径),孙:crisis-detail) import...当问题解决后,就可以针对 crisis 模块设置惰性加载 配置惰性路由,我们需要以一种类似于子路由的方式进行配置,通过路由的 loadChildren 属性来加载对应的模块,不是具体的组件,修改后的

    3.8K30

    【Hybrid开发高级系列】AngularJS(三)——开发实践

    (当你试用空格的效果,确保所有的模块都被标记为绿色)         好的,现在按下回车键。...中实现返回前一页 http://blog.csdn.net/qianqianyixiao1/article/details/51146519 AngularJs返回前一页面刷新一次前面页面 http:...        路由拦截的原理在于监听stateChangeStart或者locationChangeStart事件,在此事件中对即将跳转的路由状态进行拦截解析并做重定向处理。...,页面事件响应失效问题     问题:         从购买页面重定向登录页,再从登录页登录成功回到购买页面,购买页面的事件响应失效。     ...原因分析:         controller加载,碰到登录失效,虽然要跳转到登录页,但是当前runloop周期内,还是应该继续执行剩余代码,因为事件绑定逻辑都要执行完,不然页面回退回来,就会发现事件无法响应

    24720

    react-router 入门笔记

    与App中的路由组件处于同一层级, 当点击 Link标签, 将进入 About 不是Sub的自定义组件 */ 创建属于当前页的子路由需要,需要创建新的 '' 标签,...没有配置basename的情况下,子路由的路径将以上级路由路径为基础, 且优先匹配当前路由环境下的组件, 例如: 组件路径: '/home' 组件下有 ,...实际路径为: '/home/sub' 所以划分路径, 需要注意路径嵌套的问题,如对根路径 '/' 的处理, 很可能出现,路由配置冲突。...{ () =>( 路由嵌套 path='/sub' ) }> /* ** 这是个路由冲突的例子, 可以看到,组件和组件中...,都配置了路径 '/books', ** 当触发 Link 跳转,将显示自组件内的组件, 即显示: '路由嵌套,path=/sub' ** 看起来一切正常,但当我们刷新页面, 将进入主路由的 Books

    1.6K20

    【面试需要-Vue全家桶】一文带你看透Vue前端路由

    SPA,后端渲染是由性能问题的,用户与服务器有经常提交多,后端路由就会导致网页的频繁刷新,导致性能问题,就有了ajax前端渲染,SPA是单页面应用程序,整个网站只有一个页面,内容变化是通过ajax局部更新实现...router-link中,to表示目标路由的链接,repalce,当点击时会调用router.replace()不是router.push(),导航后不会留下history记录。...({el:'#app',//为了能够让路由规则生效,必须把路由对象挂载到vue实例对象上router}); 路由重定向 路由重定向值的是,用户访问地址a的时候,强制用户跳转到地址c,从而展示特定的组件页面...是级别的路由下有级别的路由。点击路由链接显示模板内容,模板内容又有级别的路由链接,点击级别的路由显示级别的模板内容。...vue-router默认为hash模式,使用url的hash来模拟一个完整url,当改变url页面不会重新加载。

    2.5K20

    angular基础面试题_java web面试题

    PercentPipe :把数字转换成百分比字符串,根据本地环境中的规则进行格式化angualr angular路由配置: 路由配置 app.route.ts 中 路由跳转方式 [routerLink...,ngDoCheck之后 ngAfterContentChecked:每当 Angular 检查完被投影组件或指令中的内容之后调用,ngAfter...之后调用 ngAfterViewInit:当...父子组件传值 组件暴露一个 EventEmitter 属性,当事件发生组件利用该属性 emits(向上弹射)事件。组件绑定这个事件属性,并在事件发生作出回应。...输出给组件 @Output EventEmitter somethingChanged.emit(value)也叫事件发射器 触发组件值得改变 组件接收值用的@input 组件样式 ViewEncapsulation.Native...(仅限本组件) None (全局样式)Emulated (只进不出,全局样式能进来,组件样式出不去) angular 数据双向绑定原理 原理:页面中每绑定一个数据或者事件,就会向watch队列中加入一条

    13K50

    Vue Tips

    Vue Tips 001 redirect 刷新页面 目的是刷新页面的情况下更新路由,实现类似 location.reload() 的功能,区别是只更新路由不是刷新整个页面。...实现方法是注册一个 redirect 的路由,手动重定向页面 /redirect 页面,然后再将页面重定向回来,由于页面的 key 发生了变化,从而间接实现了刷新页面组件的效果。...其他页面手动重定向 '/redirect' 页面 const { fullPath } = this.$route this....这就是导致一个问题,当用户权限发生变化的时候,或者说用户登出的时候,只能通过刷新页面的方式,才能清空之前注册的路由。作为一个 SPA 应用,刷新页面其实是一种很糟糕的用户体验。...props 传递给组件,如果传递 props 有很多,这两个新属性就派上了用场,这让我们不必要在 $props 中申明方法和属性可以直接引用。

    75640

    2022 最新 Vue 3.0 面试题

    4、相比传统的页面通过超链接实现页面的切换和跳转,Vue 使用路由不会刷新页 面。...具体步骤:使用 Vue.extend 方法创建一个组件,然后使用 Vue.component 方法注册组 件,组件需要数据,可以 props 中接受定义,组件修改好数据后,想把数据传递给...(必会) 1、组件向组件传递数据 组件内设置要传的数据,组件中引用的组件上绑定一个自定义属性并把数据 绑定在自定义属性上,组件添加参数 props 接收即可 2、组件向组件传递数据...(必会) .prevent: 提交事件不再重载页面;.stop: 阻止单击事件冒泡;.self: 当事件发生在该元素本 身不是元素的时候会触发;.capture: 事件侦听,事件发生的时候会调用...4、每次级组件发生更新组件中所有的 prop 都将会刷新为最新的值,这意味着 你不应该在一个组件内部改变 prop。

    14810

    前端Vue框架面试题大全

    beforeMount->beforeCreate->created->beforeMount->mounted->mounted 组件更新过程 beforeUpdate->beforeUpdate...->updated->updated 组件更新过程 beforeUpdate->updated 销毁过程 beforeDestroy->beforeDestroy->destroyed-...这两个API的相同之处是都会操作浏览器的历史记录,不会引起页面刷新。不同之处在于,pushState会增加一条新的历史记录,replaceState则会替换当前的历史记录。...最后一个*能匹配全部, ] }); 原理同方法2,只不过匹配到*重定向根路径: //创建路由对象并配置路由规则 let router = new VueRouter({ routes...最后一个*能匹配全部,然后重定向页面 ] }); history 路由和 hash 路由的区别, 浏览器有什么影响; hash前端路由,无刷新 history 会去请求接口 vue-router

    1.9K60

    angular4实战(2) router

    https://blog.csdn.net/j_bleach/article/details/78077844 router 单页面应用通过路由来去渲染不同的视图,为用户同一个页面看到不同的场景...组件下,暂时只引了三个组件,一个是项目启动的默认登录页面,一个是404页面,另一个是stones组件,这个组件又会作为一个级的路由容器来去管理他下面的页面。...这样做的理由是,为了页面多了之后方便管理,层级上面一定要分明,不能扁平化,所有的东西都一股脑的挂在app下面。通过引入stones路由,再让stones路由去管理其他的子路由是一个不错的选择。...'full'} redirectTo表示页面路由为空(一般是刚进入项目),会重定向login页面。.../stones/stones.module#StonesModule', canActivate: [Auth]}, 路由守卫 业务需求是没有登录的情况下,是不允许跳入下一个页面的。

    54930

    2021vue经典面试题_vue面试题大全

    组件给组件传值: (2)组件主动获取父子间的属性和方法: (3)组件给组件传值: (4)vue页面级组件之间传值 (5)说说vue的动态组件。...注意此时还没有挂载html页面上。 mounted(载入后) el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。...$parent.event来调用组件的方法。 第二种方法是组件里用$emit向组件触发一个事件,组件监听这个事件就行了。 第三种是组件把方法传入组件中,组件里直接调用这个方法。...(3)组件给组件传值: 一、使用ref属性 1.组件调用组件绑定属性ref 2.组件中使用this.refs.parent...当匹配到/details下的路由,参数值会被设置this.$route.params下,所以通过这个属性可以获取动态参数 this.

    2.1K10

    2020vue面试题及答案_人际关系面试题及答案

    父子传参:组件通过自定义属性的方式传参,通过props属性给组件传参,组件通过props属性去接收参数。 传参:组件通过自定义事件的方式传参,通过$emit去进行传参。...会给用户好像跳转了网页一样的感觉, 但是实际上没有跳转 主要用在单页面应用(SPA) history 模式 工作原理: 主要利用 history.pushState() API 来改变URL, 刷新页面...其实一共有五种模式可以实现改变URL, 刷新页面....框架和库:Angular 是一个框架不是一个库,因为它提供了关于如何构建应用程序的强有力的约束,并且还提供了更多开箱即用的功能。React 和 Vue 是是一种库,可以和各种包搭配。 8....组件之间传值方式不同:Angular 中直接的父子组件,组件可以直接访问组件的 public 属性和方法,也可以借助于@Input 和 @Output 进行通讯。

    8.7K20

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

    导航是很简单的,只是不同页面之间的切换,路由是实现导航的一种。 一个url对应的一个页面angular2中是一个组件。定义一个规则。...如果当前URL无法匹配上我们配置过的任何一个路由中的路径,路由器就会匹配上这一个。当需要显示404页面或者重定向其它路由,该特性非常有用。...展示路由的位置中的某个地方展示子路由对应的地方。 路由模块 最开始的路由,我们是直接写在app.module.ts文件中的,像这样,我们可以实现简单的导航。...可以路由配置中添加守卫来进行处理。守卫可以返回一个boolean值,为true,导航过程继续,为false,导航被取消,当然这时候也可以被导航其他页面。...我们在请求可以异步加载管理类路由,检查用户的访问权,如果用户未登录,则跳转到登陆页面。但更理想的是,我们只在用户已经登录的情况下加载AdminModule,并且直到加载完才放行它的路由

    3.3K10

    前端面试(3)vue

    并且,由于是不同的数据上触发同步,可以精确的将变更发送给绑定的视图,不是对所有的数据都执行一次检测。...单页应用不仅仅是页面交互是无刷新的,连页面跳转都是无刷新的,为了实现单页应用,所以就有了前端路由。 前端路由 1. hash 模式 改变 url 的情况下,保证页面的不刷新。...但因为没有 # 号,所以当用户刷新页面之类的操作,浏览器还是会给服务器发送请求。为了避免出现这种情况,所以这个实现需要服务器的支持,需要把所有路由重定向页面。...history 模式则会将 URL 修改得就和正常请求后端的 URL 一样,如后端没有配置对应/user/id 的路由处理,则会返回 404 错误 当用户刷新页面之类的操作,浏览器会给服务器发送请求...,所以这个实现需要服务器的支持,需要把所有路由重定向页面

    3.3K30
    领券