ionic4+angular8+动态设置首页
我采用最原始最简单的方案，直接指定刷新后访问的实际URL，不动态操作angular路由。
访问URL示例：
http://localhost:8100/#/tabs/mall
http://localhost:8100/#/user-login
index.html加入一段简单的判断脚本即可：
// 只处理未登录的状态，未登录时则刷新到指定的URL路由，即登录页面
const token = localStorage.getItem('user-token');
if (!token) {
location.href = '#/user-login';
}
完整代码：
IONIC-ANGULAR
// 只处理未登录的状态，未登录时则刷新到指定的URL路由
const token = localStorage.getItem('token');
if (!token) {
location.href = '#/user-login';
}
我的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);
}
作者：ty41232X32
