角度 5 中具有相同 URL 的两个不同组件（通过延迟加载在路由器中传递 slug）

Posted 2023-03-13

【中文标题】角度 5 中具有相同 URL 的两个不同组件（通过延迟加载在路由器中传递 slug）

【英文标题】：Two Different components with same URL(passing slug in router with lazy loading) in angular 5

【发布时间】：2018-11-13 09:54:34

【问题描述】：

如何通过只传递 slug 来解决两个不同的组件？这两种情况我都得到了第一个组件（ItemModule）。

routing.ts

const routes: Routes = [
  
    path: '',
    component: MainComponent
  ,
  
    path: '',
    children: [
      path: ':itemSlug',
      loadChildren: '../item/item.module#ItemModule'
    ],

    path: '',
    children: [
      path: ':brandSlug',
      loadChildren: '../brand/brand.module#BrandModule'
    ]
];

【参考方案1】：

const routes: Routes = [
path: '',
component: MainComponent
,

    path: 'slug',


    children: [
      path: 'itemSlug',
      loadChildren: '../item/item.module#ItemModule'
    ,

      path: 'brandSlug',
      loadChildren: '../brand/brand.module#BrandModule'
    
]];

这将解决您的问题。

【讨论】：

但在这种情况下，我将获得类似 domainName/slug/itemSlug 和 domainName/slug/brandSlug 的 URL。我的 URL 应该是 domainName/itemSlug ，其中 itemSlug 正在通过任何按钮的选择。我不会添加“itemSlug”作为关键字。可以是任何数字或字符串

在这种情况下，将路径设为空。通常您需要为默认 URL 添加一个空路径。以及确定的导航位置的具体路径。如果你真的想要你评论的方式，删除空路径的东西并为 path:'slug' 设置 path ''

感谢您的宝贵时间。

它对你有没有帮助，我关心！

是的。对我很有帮助