ionic4+angular8+动态设置首页

快来打我* 2023-07-10 14:26 36阅读 0赞

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

访问URL示例：

[http://localhost:8100/\#/tabs/mall][http_localhost_8100_tabs_mall]

[http://localhost:8100/\#/user-login][http_localhost_8100_user-login]

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

完整代码：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>IONIC-ANGULAR</title>
    
            <base href="./" />
    
            <meta
                name="viewport"
                content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
            />
            <meta name="format-detection" content="telephone=no" />
            <meta name="msapplication-tap-highlight" content="no" />
    
            
            <meta name="apple-mobile-web-app-capable" content="yes" />
            <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    
            <script>
                // 只处理未登录的状态，未登录时则刷新到指定的URL路由
                const token = localStorage.getItem('token');
                if (!token) {
                    location.href = '#/user-login';
                }
            </script>
        </head>
    
        <body>
            <app-root></app-root>
        </body>
    </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);
        }

[http_localhost_8100_tabs_mall]: http://localhost:8100/#/tabs/mall
[http_localhost_8100_user-login]: http://localhost:8100/#/user-login