ionic4+angular8+动态设置首页

我采用最原始最简单的方案，直接指定刷新后访问的实际URL，不动态操作angular路由。

访问URL示例：

http://localhost:8100/#/tabs/mall

http://localhost:8100/#/user-login

index.html加入一段简单的判断脚本即可：

完整代码： 

我的angular路由配置如下（部分）：

app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
import { USER_ROUTES } from './pages/user/user-routes';
import { MALL_ROUTES } from './pages/mall/mall-routes';

export const TABS_ROUTES: Routes = [
    {
        path: '',
        loadChildren: () => import('./pages/tabs/tabs.module').then(m => m.TabsPageModule)
    }
];

const routes: Routes = [
    ...TABS_ROUTES,
    ...USER_ROUTES,
    ...MALL_ROUTES,
    { path: '**', component: PageNotFoundComponent }
];
@NgModule({
    imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, useHash: false })],
    exports: [RouterModule]
})
export class AppRoutingModule {}

 tabs.router.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
    {
        path: 'tabs',
        component: TabsPage,
        children: [
            {
                path: 'mall',
                children: [
                    {
                        path: '',
                        loadChildren: () => import('../mall/mall/mall.module').then(m => m.MallPageModule)
                    }
                ]
            },
            .....................
            {
                path: '',
                redirectTo: '/tabs/mall',
                pathMatch: 'full'
            }
        ]
    },
    {
        path: '',
        redirectTo: '/tabs/mall',
        pathMatch: 'full'
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class TabsPageRoutingModule {}

user-routes.ts： 

import { Routes } from '@angular/router';

export const USER_ROUTES: Routes = [
    { path: 'user-login', loadChildren: './pages/user/user-login/user-login.module#UserLoginPageModule' },    
];

上面这种方式太过简单粗暴，慎用。

操作angular路由应该也不麻烦，动态设置路由还没尝试过。

还可以在app.component.ts组件中，调用路由方法进行页面跳转（写在首页里面体验可能不太好）：

/* Last updated in 20200226 */
import { Component } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { AppServiceProvider } from './providers/app-service/app-service';

.............

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss']
})
export class AppComponent {
    constructor(
        private router: Router,
        private appService: AppServiceProvider,
    ) {
        // 判断是否登录，未登录则push到登录页面
        const token = localStorage.getItem('user-token');
        if (!token) {
            this.appService.push('user-login');
        }
    }

.............

这种方式要注意返回的问题！

跳转方法定义：

    /**
     * 跳转
     * @param path 路由地址
     * @param params http://localhost:8100/test;id=222
     * @param queryParams  http://localhost:8100/test?from=tabs
     */
    push(path: string, params: any = {}, queryParams: any = {}) {
        const navigationExtras: NavigationExtras = {
            queryParams
        };
        this.router.navigate([path, params], navigationExtras);
    }