路由
1.路由原理:
2.静态路由
1)通过数组配置
const routes: Routes = [
2)通过js跳转
<a (clikc)="toIndex( )">首页</a>
toIndex( ){
this.router.navigate(['/home']);
}
3.动态路由
1)通过数组配置
const routes: Routes = [
获取动态路由的值: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 = [
children:[ /*配置子路由*/
{
path: 'welcome',
component:WelcomeComponent,
}]
7.默认跳转的路由
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("是否进入"); } }