angular路由path:' ',与path:'**'的区别

有一个路由配置如下:

const routes: Routes = [
  {
    path:'home',
    component:HomeComponent
  },
  {
    path:'news',
    component:NewsComponent
  },
  {
    path:'',
    redirectTo:'home',
    pathMatch: 'full'//pathMatch:prefix和full,prefix表示以path开头,如path:'a' 实际访问的路径为'a/b',就可以匹配到
                     //full:path完全匹配
  },
  {
    path:'**',//上面匹配不上的路径,都匹配到这
    redirectTo:'home'
  }
];

路由地址为:

1 "localhost:4200/home",匹配到Home组件

2 "localhost:4200/news",匹配到News组件

3 "localhost:4200/",匹配到Home组件

4 "localhost:4200/user",由于没有配置user对应的组件,则匹配到**,最后转发到"localhost:4200/home",显示为Home组件

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular 路由Angular 框架提供的一种机制,用于管理应用程序中不同页面之间的导航。它允许你在应用程序中定义不同的路由,每个路由对应一个特定的组件或模块。 要使用 Angular 路由,首先需要在应用程序的根模块中导入 `RouterModule` 并将其添加到 `imports` 数组中。然后,在定义路由之前,你需要创建一个包含路由配置的模块。 路由配置模块可以包含以下内容: - 导入 `RouterModule` 并使用 `forRoot` 方法来配置根路由。 - 使用 `Routes` 类定义一个路由数组,其中每个路由对象都包含路径和组件的映射关系。 - 将路由数组传递给 `RouterModule.forRoot()` 方法。 例如,以下是一个简单的路由配置示例: ```typescript import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home.component'; import { AboutComponent } from './about.component'; const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } ``` 在上面的示例中,我们定义了两个路由。路径为空时,将加载 `HomeComponent` 组件,而路径为 'about' 时,将加载 `AboutComponent` 组件。 最后,你可以在应用程序的模板中使用 `<router-outlet></router-outlet>` 标签来显示当前路由所对应的组件。 这只是 Angular 路由的基本概念,你还可以通过配置更多选项来实现更复杂的路由功能,如路由参数、子路由路由守卫等。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值