文章内容
2020/6/23 17:56:32,作 者: 黄兵
Angular路由相干问题总结
对于Angular路由，在使用过程中存在的一些问题做一个总结。
对于https://www.domain.com/help和https://www.domain.com/help/help_content，如果使用延迟加载，具体代码如下：
{path: 'help', loadChildren: './common_article/help/help.module#HelpModule'},启用延迟加载。
const routes: Routes = [
{
path: '',
component: TemplateLayoutComponent,
pathMatch: 'full',
},
{
path: 'help/:link', component: HelpTemplateComponent
}
];
这里会匹配上面的两个地址，但是如果是这样写：
const routes: Routes = [
{
path: '',
component: TemplateLayoutComponent,
pathMatch: 'full',
},
{
path: ':link', component: HelpTemplateComponent
}
];
则不会匹配https://www.domain.com/help ，但是匹配https://www.domain.com/help/help_content ，没有问题。
测试了子路由，依然不匹配，具体写法如下：
const routes: Routes = [
{
path: '',
component: TemplateLayoutComponent,
pathMatch: 'full',
children: [
{
path: 'help/:link', component: HelpTemplateComponent
}
]
},
];
无论是：https://www.domain.com/help/help_content ,还是https://www.domain.com/help/help/help_content 都无法匹配。
总结：
https://www.domain.com/help/help_content 匹配方式，首先是到app-routing.module寻找路由匹配，主要是匹配第一段，之后跳转到二级路由页面，这里pathMatch: 'full'的作用可以参考这篇文章：https://angular.cn/guide/router#preloading-component-data
这里:link主要是参数，可以是字符串、数字，但是需要符合uri规范。
评论列表