[完善]路由复用

src/app/CustomReuseStrategy.ts

@@ -15,13 +15,19 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
     /** 表示对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */
     shouldDetach(route: ActivatedRouteSnapshot): boolean {
         console.log('shouldDetach======>', route);
-        return true;
+        if (route.routeConfig.path == 'basicInfo') {
+            return false;
+        } else {
+            return true;
+        }
+
     }
 
     /** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */
     store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
-        console.log('store======>', route, handle);
+        console.log('store======>route', route);
-        if(route.routeConfig.path == 'basicInfo'){
+        // console.log('store======>handle', handle);
+        if (route.routeConfig.path == 'unit') {
             CustomReuseStrategy.handlers[this.getRouteUrl(route)] = handle;
         }
     }

src/app/app-routing.module.ts

@@ -10,7 +10,7 @@ const routes: Routes = [
   { path: 'login', component: LoginComponent, },
   {
     path: '', component: NavComponent, canActivate: [AuthGuard], children: [
-      { path: 'homePage', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) }
+      { path: '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) }
     ]
   }//主页面
 ];

src/app/home/basic-info/basic-info.component.html

@@ -1 +1,10 @@
-<p>basic-info works!</p>
+<div class="box">
+    <div class="nav">
+        <ul>
+            <li [routerLink]="['/basicInfo/unit']" routerLinkActive="router-link-active">基本信息</li>
+        </ul>
+    </div>
+    <div class="content">
+        <router-outlet></router-outlet>
+    </div>
+</div>

src/app/home/basic-info/basic-info.component.scss

@@ -0,0 +1,36 @@
+.box {
+  display: flex;
+}
+
+
+.nav {
+  width: 200px;
+  height: 100%;
+  background: #2c4dc1;
+
+  ul {
+    li {
+      height: 48px;
+      line-height: 48px;
+      cursor: pointer;
+    }
+  }
+}
+
+.router-link-active {
+  background: #fff;
+}
+
+.content {
+  flex: 1;
+}
+
+.router-link-active {
+  color: black;
+}
+
+.content {
+  box-sizing: border-box;
+  padding: 8px;
+  background: #F6F5F8;
+}

src/app/home/basic-info/basic-info.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-
+import { CustomReuseStrategy } from 'src/app/CustomReuseStrategy';
 @Component({
   selector: 'app-basic-info',
   templateUrl: './basic-info.component.html',
@@ -12,4 +12,8 @@ export class BasicInfoComponent implements OnInit {
   ngOnInit(): void {
   }
 
+  ngOnDestroy(): void {
+    console.log(5555555)
+    CustomReuseStrategy.deleteRouteSnapshot('/basicInfo/unit');
+  }
 }

src/app/home/basic-info/unit-details/unit-details.component.html

@@ -0,0 +1 @@
+<button (click)="back()">返回</button>

src/app/home/basic-info/unit-details/unit-details.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { CustomReuseStrategy } from 'src/app/CustomReuseStrategy';
+@Component({
+  selector: 'app-unit-details',
+  templateUrl: './unit-details.component.html',
+  styleUrls: ['./unit-details.component.scss']
+})
+export class UnitDetailsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+  back() {
+    window.history.back()
+  }
+}

src/app/home/basic-info/unit/unit.component.html

@@ -0,0 +1,2 @@
+<button (click)="next()">下一页</button>
+<input placeholder="label" value="value">

src/app/home/basic-info/unit/unit.component.scss

@@ -0,0 +1,6 @@
+p{
+    color: black;
+}
+input{
+    color: red;
+}

src/app/home/basic-info/unit/unit.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-unit',
+  templateUrl: './unit.component.html',
+  styleUrls: ['./unit.component.scss']
+})
+export class UnitComponent implements OnInit {
+
+  constructor(private router: Router) { }
+
+  ngOnInit(): void {
+  }
+  next() {
+    this.router.navigate(['/basicInfo/unit/details']);
+  }
+  ngOnDestroy(): void {
+    console.log('删除了6666666666666')
+    // CustomReuseStrategy.deleteRouteSnapshot('/basicInfo/unit');
+  }
+}

src/app/home/home-routing.module.ts

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { BasicInfoComponent } from './basic-info/basic-info.component';
+import { UnitDetailsComponent } from './basic-info/unit-details/unit-details.component';
+import { UnitComponent } from './basic-info/unit/unit.component';
 import { StatisticAnalysisComponent } from './statistic-analysis/statistic-analysis.component';
 import { OrComponent } from './system-management/or/or.component';
 import { RoleComponent } from './system-management/role/role.component';
@@ -9,17 +11,29 @@ import { UserComponent } from './system-management/user/user.component';
 import { TaskComponent } from './task/task.component';
 
 const routes: Routes = [
-  { path: 'basicInfo', component: BasicInfoComponent },
+  {
+    path: 'basicInfo', component: BasicInfoComponent,
+    children: [
+      { path: '', redirectTo: '/basicInfo/unit', pathMatch: 'full' },
+      {
+        path: 'unit',
+        component: UnitComponent,
+        children: [
+
+        ]
+      },
+      {
+        path: 'unit/details',
+        component: UnitDetailsComponent
+      }
+    ],
+  },
   { path: 'task', component: TaskComponent },
   { path: 'statistic', component: StatisticAnalysisComponent },
   {
     path: 'system', component: SystemManagementComponent,
     children: [
-      {
+      { path: '', redirectTo: '/system/role', pathMatch: 'full' },
-        path: '',
-        redirectTo: '/homePage/system/role',
-        pathMatch: 'full'
-      },
       {
         path: 'role',
         component: RoleComponent,

src/app/home/home.module.ts

@@ -11,6 +11,8 @@ import { SystemManagementComponent } from './system-management/system-management
 import { UserComponent } from './system-management/user/user.component';
 import { RoleComponent } from './system-management/role/role.component';
 import { OrComponent } from './system-management/or/or.component';
+import { UnitComponent } from './basic-info/unit/unit.component';
+import { UnitDetailsComponent } from './basic-info/unit-details/unit-details.component';
 
 @NgModule({
   declarations: [
@@ -21,7 +23,9 @@ import { OrComponent } from './system-management/or/or.component';
     SystemManagementComponent,
     UserComponent,
     RoleComponent,
-    OrComponent
+    OrComponent,
+    UnitComponent,
+    UnitDetailsComponent
   ],
   imports: [
     CommonModule,

src/app/home/nav/nav.component.html

@@ -1,16 +1,16 @@
 <nz-layout>
     <nz-header>
         <ul>
-            <li [routerLink]="['/homePage/basicInfo']" routerLinkActive="router-link-active">
+            <li [routerLink]="['/basicInfo']" routerLinkActive="router-link-active">
                 <div>基础信息</div>
             </li>
-            <li [routerLink]="['/homePage/task']" routerLinkActive="router-link-active">
+            <li [routerLink]="['/task']" routerLinkActive="router-link-active">
                 <div>一体化任务</div>
             </li>
-            <li [routerLink]="['/homePage/statistic']" routerLinkActive="router-link-active">
+            <li [routerLink]="['/statistic']" routerLinkActive="router-link-active">
                 <div>统计分析</div>
             </li>
-            <li [routerLink]="['/homePage/system']" routerLinkActive="router-link-active">
+            <li [routerLink]="['/system']" routerLinkActive="router-link-active">
                 <div>系统管理</div>
             </li>
         </ul>

src/app/home/nav/nav.component.scss

@@ -4,9 +4,9 @@
 
 
 nz-header {
-  height: 48px;
+  height: 50px;
-  line-height: 48px;
+  line-height: 50px;
-  background: #2D4DbF;
+  background: #2C4DC0;
   color: #fff;
   display: flex;
   justify-content: center;
@@ -16,7 +16,7 @@ nz-header {
     display: flex;
     justify-content: center;
     margin-bottom: 0px;
-    width:600px;
+    width: 600px;
 
     li {
       margin: 0 6px;
@@ -31,15 +31,16 @@ nz-header {
 }
 
 .router-link-active {
-  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
+  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(180, 202, 252, 0.5000) 50%, #769FF9 100%);
   text-align: center;
   transform: skewX(-20deg);
 }
 
 .router-link-active>div {
-  height: 48px;
+  height: 50px;
   transform: skewX(20deg);
-  border-bottom: 2px solid red;
+  border-bottom: 2px solid #95FFCF;
+  color: #fff;
 }
 
 nz-footer {

src/app/home/nav/nav.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-nav',
@@ -7,9 +8,12 @@ import { Component, OnInit } from '@angular/core';
 })
 export class NavComponent implements OnInit {
 
-  constructor() { }
+  constructor(private router: Router) { }
 
   ngOnInit(): void {
-  }
     
+  }
+  xxx() {
+    this.router.navigate(['/task']);
+  }
 }

src/app/home/system-management/system-management.component.html

@@ -1,9 +1,9 @@
 <div class="box">
     <div class="nav">
         <ul>
-            <li [routerLink]="['/homePage/system/role']" routerLinkActive="router-link-active">角色管理</li>
+            <li [routerLink]="['/system/role']" routerLinkActive="router-link-active">角色管理</li>
-            <li [routerLink]="['/homePage/system/user']" routerLinkActive="router-link-active">用户管理</li>
+            <li [routerLink]="['/system/user']" routerLinkActive="router-link-active">用户管理</li>
-            <li [routerLink]="['/homePage/system/or']" routerLinkActive="router-link-active">组织机构管理</li>
+            <li [routerLink]="['/system/or']" routerLinkActive="router-link-active">组织机构管理</li>
         </ul>
     </div>
     <div class="content">

src/app/home/system-management/system-management.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-
+import { CustomReuseStrategy } from 'src/app/CustomReuseStrategy';
 @Component({
   selector: 'app-system-management',
   templateUrl: './system-management.component.html',
@@ -10,6 +10,7 @@ export class SystemManagementComponent implements OnInit {
   constructor() { }
 
   ngOnInit(): void {
+    // CustomReuseStrategy.deleteRouteSnapshot('/basicInfo/unit');
   }
 
 }

src/app/home/task/task.component.ts

@@ -11,5 +11,4 @@ export class TaskComponent implements OnInit {
 
   ngOnInit(): void {
   }
-
 }

src/app/pages/login/login.component.ts

@@ -70,7 +70,6 @@ export class LoginComponent implements OnInit {
 
 
 
-
   remember: any//记住密码
   autologin: any//自动登录
   isLoading = false;
@@ -107,7 +106,7 @@ export class LoginComponent implements OnInit {
         this.autoLogin()
         sessionStorage.setItem("token", data.token);
         sessionStorage.setItem("refreshToken", data.refreshToken);
-        this.router.navigate(['/homePage'])
+        this.router.navigate(['/system'])
         this.message.create('success', `登录成功`);
 
         //调用服务中的function刷新token

src/styles.scss

@@ -19,6 +19,7 @@ body {
   height: 100%;
   overflow: hidden;
   font-family: synormal !important;
+
 }
 
 body {
@@ -79,6 +80,10 @@ a {
   color: #000;
 }
 
+p {
+  color: #000;
+}
+
 ul,
 ol,
 li {
@@ -96,6 +101,14 @@ textarea {
   background-color: #999;
 }
 
+::-webkit-scrollbar {
+  width: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #999;
+}
+
 app-root {
   height: 100%;
 }