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

最新推荐文章于 2025-07-07 17:11:37 发布

原创最新推荐文章于 2025-07-07 17:11:37 发布 · 4.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#path:'' #path:'**' #angular路由

Angular 专栏收录该内容

10 篇文章

订阅专栏

本文详细解析了一个具体的路由配置案例，展示了如何通过不同的path设置，匹配到相应的组件，包括home和news组件的直接匹配，以及通过通配符和pathMatch属性处理未定义路径的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有一个路由配置如下：

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组件