时间戳

首页 > 解决方案 > 在 Angular 4 应用程序中实现用户友好的路由

angular - 在 Angular 4 应用程序中实现用户友好的路由

问题描述

我有一个有角度的 4 单页应用程序。营销需求是检查我们是否可以有这样的网址：

www.abc.com/fancyname/x

www.abc.com/fancyname/y

www.abc.com/fancyname/z

目前显示的路由有：www.abc.com/#/x 等。

以上如何实现，我们如何配置路由呢？

a) 要删除 # 我们可以使用 pathlocationstratergy 但我们需要尝试相同的方法。到现在还没试过

b）我们可以使用子路由，但我们可能没有足够的时间，因为当前路由不是以这种方式完成的。

目前我们的路由是这样完成的：

const appRoutes: Routes = [
  { path: 'x', component: xComponent },
  { path: 'y',      component: yComponent},
  { path: 'z',      component: zComponent},
];

we want it to be like: 

const appRoutes: Routes = [
  { path: 'fancyname/x', component: xComponent },
  { path: 'fancyname/y',      component: yComponent},
  { path: 'fancyname/z',      component: zComponent},
];

我们假设如果我们尝试实现类似 fancyname/x 的东西，它将被视为子路由。我们不能将 base-href 操作为 /fancyname，因为它会破坏所有内部资产（如图像、字体等）的 url。

标签： angularrouting

解决方案

如果我正确理解了这个问题，您应该只使用无组件父路由。

像这样：

const appRoutes: Routes = [{ 
  path: 'fancyname', 
  children: [
    { path: 'x', component: xComponent },
    { path: 'y', component: yComponent },
    { path: 'z', component: zComponent }
  ]}
];

据我所知，这样做不应该改变你的应用程序中的任何功能，除了使路线“fancyname/childpath”。

推荐阅读