Angular 5中的参数路由

Question

4

根据这里的链接 - 我的应用程序具有路由功能：

const routes: Routes = [
 { path: 'blog/:id', component: BlogComponent },
 { path: 'blog/moo', component: MooComponent },
];

以下是相关信息:

如果我们访问 /blog/moo, 尽管它也匹配第一个blog/:id路由的路径，但会显示MooComponent。

重要的是，非参数化路由优先于参数化路由。

很遗憾，实际情况并非如此。如果我访问url blog/moo，路由将把moo视为Id并打开BlogComponent。

我不知道该怎么解决，有两个想法：

你认为呢？有什么想法吗？

- DiPix

3个回答

2

在

const routes: Routes = [
 { path: 'blog/:id', component: BlogComponent },
 { path: 'blog/moo', component: MooComponent },
];

尝试将其编写为：

const routes: Routes = [
 { path: 'blog/moo', component: MooComponent },
 { path: 'blog/:id', component: BlogComponent },

];

现在应该可以工作了。在Angular中，编写路由的顺序非常重要。

- Vivek P Rajeev

0

尝试切换路由定义的顺序。第一个匹配的路由总是获胜。实际上，导航到/blog/moo不可能同时触发两个组件。

但是你可以在MooComponent中引用BlogComponent。

- David Votrubec

我希望避免使用这样的解决方案，因为如果在moo中有嵌套（延迟加载）路由，则可能无法正常工作。 - DiPix

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sravan · Accepted Answer

根据Angular官方文档 参考此链接

路由器采用首个匹配优先策略。

路由器采用首个匹配优先策略。通配符路由是路由配置中最不具体的路由。请确保其位于配置的最后一个位置。
路由配置中各路由的顺序很重要，这是设计决定的。当匹配路由时，路由器使用首个匹配优先策略，因此更具体的路由应放在较不具体的路由
上面。在上面的配置中，静态路径路由排在第一位，然后是空路径路由，匹配默认路由。通配符路由排在最后，因为它匹配每个URL，并且仅在没有其他路由被首选匹配时才选择它。

所以您应该按相反的顺序添加路由：

const routes: Routes = [
 { path: 'blog/moo', component: MooComponent },
 { path: 'blog/:id', component: BlogComponent },
];

我想强调上面陈述中的一个重点：

注意：

更为具体的路由应该放在不太具体的路由之上。

因为 'blog/moo' 更为具体，所以需要将其放在 'blog/:id' 之上。

我已经为您创建了一个 PLUNKER 示例。