离子 4 Angular PWA 定制 url

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' }
      ]

有没有办法在 angular 中完成自定义 url，如下所示

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'
}

离子 4 Angular PWA 定制 url

ionic 4 Angular PWA customized url

routing

progressive-web-apps

angular

ionic4