路由

 

 

1.路由原理：

 

2.静态路由

   1）通过数组配置

        const routes: Routes = [

　　{

　　　　path: 'home',

　　　　component:TopNavComponent

　　},

　　{

　　　　path: 'Manager',

　　　　component:ManagerComponent

　　}]

 

       <a routerLink="/home">首页</a>

　　<a routerLink="/Manager">用户</a>

   2）通过js跳转

 　　<a (clikc)="toIndex( )">首页</a>

       toIndex( ){

　　　　this.router.navigate(['/home']);　　

　　}

3.动态路由  

   1）通过数组配置   

       const routes: Routes = [

　　{

　　　　path: 'home/:aid',

　　　　component:TopNavComponent

　　},

　　{

　　　　path: 'Manager/:cid',

　　　　component:ManagerComponent

　　}]

       <a routerLink="/home/1">首页</a>

　　<a routerLink="/Manager/1">用户</a>

       获取动态路由的值：this.route.params.subscribe(function(data){});

   2）通过js跳转(get)

　    <a (clikc)="toIndex( )">首页</a>

       toIndex( ){　

　　let navigationExtras: NavigationExtras = {
　　　　queryParams: { 'session_id': '123' },
　　　　
　　};
　　this.router.navigate(['/news'],navigationExtras);

　　}

      获取动态路由的值：this.route.queryParams.subscribe(function(data){});

4.动态加载的组件显示的地方-->
<router-outlet></router-outlet>

5. routerLinkActive

6.父子路由：

 const routes: Routes = [

　　{

　　　　path: 'home',

　　　　component:TopNavComponent，

　　　　children:[ /*配置子路由*/

　　　　{
　　　　　　path: 'welcome',
　　　　　　component:WelcomeComponent,
　　　　}]

　　},

　　{

　　　　path: 'Manager',

　　　　component:ManagerComponent

　　}

]

7.默认跳转的路由

{

　　path:'', /*刚进来是空的话可以跳转到首页*/

　　redirectTo:'TopNav',

　　pathMatch:'full',

},

　　// { /*匹配不到路由的时候加载的组件*/

　　// path: '**', /*任意的路由*/

　　// // component:HomeComponent

　　// redirectTo:'home'

// }

 

 

---

路由守卫：canDeactivate与canActivate同样应用

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IndexComponent } from './views/index/index.component';
import { TestComponent } from './views/test/test.component';
import { LoginActiveService } from './services/login-active.service'
const routes: Routes = [
    { path: '', component: IndexComponent },
    { path: 'test', component: TestComponent , canDeactivate: [LoginActiveService] }
];

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

import { Injectable , canDeactivate} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LoginActiveService implements canDeactivate{
    canDeactivate(){
    
    return window.confirm("是否进入");
  }
}