javascript - 以下链接的 Angular 路线？

Question

我有下面提到的链接，我想为此编写 Angular 路由条件。

链接:

1.www.example.com/level-1
2.www.example.com/level-1/level-2
3.www.example.com/level-1/level-2/level-3

像这样，我有大型菜单链接，所以我想要这个的路线条件，这样我就可以写$routeProvider.when( '/level-1/:slug', {} );

我希望以动态方式实现这一点，这意味着我不想手动编写 level-1 作为前缀术语。

动态意味着它将是第 1 级、第 2 级或第 3 级中的任何术语作为前缀

我已经尝试过这样的:

.when( '/level-1/:slug', {
})
.when( '/level-1/level-2/:slug', {
})
.when( '/level-1/level-2/level-3/:slug', {
})

它工作正常，但我不想这样做。

Answer 1

您可以根据需要向路由器传递任意数量的参数，因此请尝试在路由中创建尽可能多的段。这样:

.when( '/:lev1/:slug', { ... })
.when( '/:lev1/:lev2/:slug', { ... })
.when( '/:lev1/:lev2/:lev3/:slug', { ... })

当然，您可以在 Controller 中访问这些参数，就像使用 :slug 一样。 但请注意，这些路线将捕获具有 2、3 或 4 段的所有州，因此它们可能会与您在应用程序中定义的其他路线混淆...... 为避免此问题，您可以做的一件事是使用您选择的固定字符串为所有这些路由添加前缀。例如:

.when( '/megamenu/:lev1/:slug', { ... })
.when( '/megamenu/:lev1/:lev2/:slug', { ... })
.when( '/megamenu/:lev1/:lev2/:lev3/:slug', { ... })

编辑:根据您的评论，您似乎在这些路由中需要 n 个级别，并且可能您希望绑定(bind)到同一个 Controller 。这导致两种可能性:

1) 如果您使用 AngularJS 1.5 或更高版本，您可以创建一个组件并路由到它，创建所需参数的绑定(bind)。一条路线就足够了。

2) 如果您使用 AngularJS 的早期版本，或者您不想弄乱新的组件架构，那么请尝试这样做:仅定义一个具有最大级别数的路由，比方说 5。调用所有包含 5 段的路由加上 slug 参数，将虚拟值传递给未使用的路由，然后在 Controller 上解析这些参数以查看哪些参数有效。

.when( '/megamenu/:lev1/:lev2/:lev3/:lev4/:lev5/:slug', { ... })

然后生成这样的链接:

<a href="/megamenu/group/item/code/XXXXX/XXXXX/whatever123">CLICK ME</a>

然后您就会知道“XXXXX”是一个占位符，在您的 Controller 中必须被忽略。