ionic 4 Angular PWA 自定义网址

Question

我正在使用 Ionic 4 和 Angular 7 开发一个网络应用程序。当我访问我的域时，它会自动重定向到主页。我想使用变量而不是 home

例如

www.mydomain.com/home/school1 to
www.mydomain.com/school1
www.mydomain.com/school2 etc

到目前为止，我的代码中有这个可以工作

    const routes: Routes = [
      {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
      },
      {
        path: 'home',
        loadChildren: './home/home.module#HomePageModule',
        canActivate: [BeforeLoginService]
      },
      {
         path: 'home/:school_name',
         loadChildren: './home/home.module#HomePageModule',
         canActivate: [BeforeLoginService]
       }, 
{ 
path: 'school-dashboard', 
loadChildren: './schools/school-dashboard/school-dashboard.module#SchoolDashboardPageModule' },
  { 
path: 'admin-dashboard', 
loadChildren: './admin/admin-dashboard/admin-dashboard.module#AdminDashboardPageModule' },]

到目前为止，我已经尝试了以下代码。这与路由混淆。 router.navigateByUrl 或 router.navigate 在我实现此代码时不起作用

const routes: Routes = [
      {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
      },
      {
         path: ':school_name',
         loadChildren: './home/home.module#HomePageModule',
         canActivate: [BeforeLoginService]
       },{ 
path: 'school-dashboard', 
loadChildren: './schools/school-dashboard/school-dashboard.module#SchoolDashboardPageModule' },
  { 
path: 'admin-dashboard', 
loadChildren: './admin/admin-dashboard/admin-dashboard.module#AdminDashboardPageModule' }
      ]

有没有办法像下面这样以角度完成自定义网址

www.mydomain.com/school1 or www.mydomain.com/school2 instead of www.mydomain.com/home/school1

非常感谢任何帮助

Answer 1

你可以试试这个：

const routes: Routes = [
{
  path: '',
  loadChildren: './home/home.module#HomePageModule',
  canActivate: [BeforeLoginService]
},
{
 path: ':school_name',
 loadChildren: './home/home.module#HomePageModule',
 canActivate: [BeforeLoginService]
}]

请查看工作演示 here。

---

更新

请尝试以下路线：

const routes: Routes = [
  {
    path: '',
    loadChildren: './home/home.module#HomePageModule',
    canActivate: [BeforeLoginService]
  },
  {
     path: ':school_name',
     loadChildren: './home/home.module#HomePageModule',
     canActivate: [BeforeLoginService]
  },
  { 
     path: 'school-dashboard', 
     loadChildren: './schools/school-dashboard/school-dashboard.module#SchoolDashboardPageModule' 
  },
  { 
     path: 'admin-dashboard', 
     loadChildren: './admin/admin-dashboard/admin-dashboard.module#AdminDashboardPageModule'
  }
 ];

这样，当用户输入mydomain.com/school1时，应用会显示HomeComponent，即登录页面。从那里，您可以使用 school1 作为参数：

this.activatedRoute.snapshot.paramMap.get('school_name')

通过此参数，您将知道进入了哪个学校，因此您可以显示相关信息，然后对用户进行身份验证。之后，您将不得不使用以下方式导航：

this.router.navigate(['/school-dashboard']);

请注意，如果用户没有在 URL 中输入学校名称，则需要处理，因此参数将为 undefined。您需要显示一些默认值，或者显示另一个页面而不是 HomeComponent。您可以通过将第一个路由更改为指向另一个组件来做到这一点：

{
  path: '',
  loadChildren: './MY_OTHER_COMPONENT_MODULE_PATH#MY_OTHER_COMPONENT_MODULE'
}