如果您想了解【Angular】路由跳转(代码跳转)和angular路由跳转的知识，那么本篇文章将是您的不二之选。我们将深入剖析【Angular】路由跳转(代码跳转)的各个方面，并为您解答angular

如果您想了解【Angular】路由跳转(代码跳转)和angular 路由跳转的知识，那么本篇文章将是您的不二之选。我们将深入剖析【Angular】路由跳转(代码跳转)的各个方面，并为您解答angular 路由跳转的疑在这篇文章中，我们将为您介绍【Angular】路由跳转(代码跳转)的相关知识，同时也会详细的解释angular 路由跳转的运用方法，并给出实际的案例分析，希望能帮助到您！

• 【Angular】路由跳转(代码跳转)（angular 路由跳转）
• Angular routing生成路由和路由的跳转
• Angular 利用路由跳转到指定页面的指定位置方法
• angular 未登录状态拦截路由跳转的方法
• angular 路由策略相关问题 （包含路由跳转以后原页面没有进destory方法的原因和处理）

【Angular】路由跳转(代码跳转)（angular 路由跳转）

【WHAT】
在Angular中，路由的作用就是建立URL路径和组件（页面，因为页面就是由组件构成）之间的对应关系，根据不同的URL路径匹配出相应的组件并渲染。

【HOW】

1. 定义路由配置
2. 创建根路由模块
3. 添加路由插座
(以上是基本且必须的三个步骤)

【示例：(文件如下)】

1.在app.routes定义路由,主要设置有:

• 设置启动的第一个路由
• 定义要在根目录下启动所有子路由
  

export const AppRoutes=[
    {
        path: '',redirectTo: 'showmain',//项目启动的第一个路由为showmain
        pathMatch: 'full'
    },{  
        path: 'showmain',loadChildren: './showmain/showmain.module#ShowmainModule'
    },{
        path: 'login',loadChildren: './login/login.module#LoginModule'
    }
]

2.创建根路由（app.module.ts）,主要设置有

• 设置根路由

import { browserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {RouterModule} from '@angular/router';  //导入路由
import { AppComponent } from './app.component'; 
import {AppRoutes} from './app.routes';

@NgModule({
  declarations: [
    AppComponent
  ],imports: [
    browserModule,FormsModule,HttpModule,RouterModule,//设置主要路由
    RouterModule.forRoot(AppRoutes) 
  ],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

3.定义插座（在app.component.html）

<router-outlet></router-outlet>

4.定义子路由showmain.routes.ts

import { ShowmainComponent } from './showmain.component';

export const ShowmainRoutes= [
    {
        path: '',component: ShowmainComponent
    }
]

5.设置子路由ShowmainRoutes

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {RouterModule} from '@angular/router';
import {ShowmainRoutes} from './showmain.routes';
import { ShowmainComponent } from './showmain.component';

@NgModule({
  imports: [
    CommonModule,//设置ShowmainRoutes为子路由
    RouterModule.forChild(<any>ShowmainRoutes)    
  ],declarations: [
    ShowmainComponent
  ]
})
export class ShowmainModule { }

6.设置跳转的下一个子路由login
在showmain.component.ts文件中设置在doIn（）触发时跳转路由

import { Component,OnInit } from '@angular/core';
import { Router} from '@angular/router'; //导入router服务

@Component({
  selector: 'app-showmain',templateUrl: './showmain.component.html',styleUrls: ['./showmain.component.css']
})
export class ShowmainComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
  }

  doIn(): void {
  //跳转到login路由（绝对路径）
    this.router.navigateByUrl("login") 
  }
}

（之所以第二个页面要设置跳转，而跳转到第一个子路由没用到该句，是因为在根路由下已设置了项目启动后跳转的第一个路由）

• 在showmain.component.html设置页面

<h1>欢迎加入大米时代！</h1>
<button (click)="doIn()">进入系统</button>

7.定义第二个子路由LoginRoutes
login.routes.ts

import { LoginComponent } from './login.component';

export const LoginRoutes= [
    {
        path: '',component: LoginComponent
    }
]

8.设置LoginRoutes为子路由

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {RouterModule} from '@angular/router';
import{FormsModule}from '@angular/forms';

import { LoginRoutes } from './login.routes';
import { LoginComponent } from './login.component';

@NgModule({
  imports: [
    CommonModule,//必须导入FormsMoudule，因为此页面用到了数据双向绑定
    FormsModule,//将LoginRoutes设置为子路由
    RouterModule.forChild(<any>LoginRoutes)   
  ],declarations: [
    LoginComponent
  ]  
})
export class LoginModule { }

9.设置第二个路由即页面的主要内容
login.component.ts文件

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-login',templateUrl: './login.component.html',styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  public username:string;
  public password:string;

  doLogin() {
    //必须写this
    let username = this.username;
    let password = this.password;
    if (username == "1" && password == "1"){
      alert("登录成功")
    }
    else{
      alert("登录失败")
    }
  }
}

login.component.html文件

<div class="login">
  <h1>前台登录</h1>
</div>
<div>
  <label for="">用户名：</label>
  <input name ="username" type="text" [(ngModel)]="username">
</div>
<div>
  <label for="">密  码：</label>
  <input name ="password" type="text" [(ngModel)]="password">
</div>
<button (click)="doLogin()">登录</button>

程序执行，访问文件的顺序依次是：

思路是这样的：
在app.module中设置了根路由AppRoutes，于是开始执行app.module中，而app.module设置了跳转的第一个子路由showmain，在此文件中有该路由，于是去设置的路径下去找ShowmainModule，于是执行到了showmain.module，去showmain.routes找该路由，该路由被渲染的组件为ShowmainComponent，于是又执行到了showmain.component文件中，而此文件中又设置了一个绝对路径下的路由login，于是又执行到app.routes下查找有无该路由，有则跳转到指定目录下的login.module文件下找LoginModule，在login.module定义了该路由LoginRoutes，于是去login.routes找到了该路由，该路由被渲染的组件为LoginComponent，于是去login.component文件中找到该组件，执行方法，结束！[之所以回去app.routes下查找路由,是根据它设置的找路径找的this.router.navigateByUrl("login")]

【扩展】

1. declarations:声明自己写的东西（如组件）
2. imports:通常是导入程序已封装号的东西（如router的forRoot()方法）

3. 快捷键

   • 新建文件(指定目录下)：ng g c 文件名
   • 新建module： ng g module 名称
   • 启动服务的同时在浏览器中打开：ng serve --open
   • 该运行的端口：ng serve --port 端口号
   • 标签：直接打标签名+双击Tab（不用输<）

4. 有数值双向绑定时，无论html中用没用到表单，都要导入forms：import { FormsModule } from '@angular/forms';

Angular routing生成路由和路由的跳转

ng new demo02 --routing

npm install

ng serve --open

ng g component components/home

ng g component components/news

ng g component components/user

// 引入组件
import {HomeComponent} from ''./components/home/home.component''
import {NewsComponent} from ''./components/news/news.component''
import {UserComponent} from ''./components/user/user.component''

// 配置路由
const routes: Routes = [
  {
    path:''home'',
    component:HomeComponent,
  },
  {
    path:''news'',
    component:NewsComponent,
  },
  {
    path:''user'',
    component:UserComponent,
  }
];

<header>
    <ul>
        <li><a routerLink="home" >首页</a></li>
        <li><a routerLink="news" >新闻</a></li>
        <li><a routerLink="user" >用户</a></li>
    </ul>
</header>

  {
    path:'''',  // 空路由
    redirectTo:''home'', // 重定向到
    pathMatch:''full''
  }

 // 匹配不到路由时候加载的组件
  {
    path:''**'',  // 任意路由
    component:HomeComponent
  }

<p>You''ll see which payment methods are available to you on the checkout page, before you submit a reservation request. After you select your country, all of your payment details will be shown.</p>
<p id="readMore">We charge featured guide who offer journey a 15% service fee. The amount of the service fee is calculated from the price that featured guide set for their journey. You will see the service fee when you set your price before submitting a journey. The service fee is automatically deducted from the payout to the Host.
  

Depending on the laws of the jurisdiction involved, VAT may be charged on top of the service fee. The service fee will include these VAT charges when applicable.</p>

<button (click)="readMore()">ReadMore</button>

 { path: '''',component: LoginComponent},
 { path: ''detail'', component: DetailComponent },
 { path: ''**'',component: NotFoundComponent}

 { path: '''',component: LoginComponent},
 { path: ''detail'', component: DetailComponent },
 { path: ''detail#readMore'',component: NotFoundComponent},
 { path: ''**'',component: NotFoundComponent}

readMore() {
this.router.navigateByUrl(''/detail#readMore'');
 }

ngOnInit() {
 if (window.location.hash === ''#readMore'') {
  window.location.assign(''detail#readMore'');
 }
 }

readMore() {
 this.router.navigate([''/detail'', { id: ''readMore''}]);
 }
detail.component.ts

this.myActivatedRoute.params.subscribe(
  (data: any) => {
  if (data.id === ''readMore'') {
   window.location.assign(''detail#readMore'');
  }
  }
 );

var myapp=angular.module("MainController",["ui.router",''infinite-scroll'',''oc.lazyLoad'']);

myapp.config(
 function($stateProvider,$urlRouterProvider,$ocLazyLoadProvider,$httpProvider){
 $stateProvider
  .state(''index'', {//首页
   url: ''/index'',
   templateUrl: basePath+''page/gym/lecycle_index.html'',
   resolve: {
     loadMyCtrl: [''$ocLazyLoad'', function($ocLazyLoad){//这两行就是loader的使用，此行写法固定
      return $ocLazyLoad.load(basePath+''src/lecycle_index/le_index.js'');//后面这个就是进入这个模板时候要加载进来的js
     }]
    }
  })
  .state(''userAgree'',{//同意用户协议页面
   url:"/userAgree",
   templateUrl:basePath+''page/agreement.html''
  })
  .......
 $urlRouterProvider.otherwise("/index");/*BproDtails*/
});

myapp.run(function ($rootScope,$state) {
 $rootScope.$on(''$stateChangeStart'',function(event){
  // if(toState.name==''login'')return;// 如果是进入登录界面则允许
  // 如果用户不存在
  if(ifLoginTrue==false){
   console.log("没有登录")
   event.preventDefault();// 取消默认跳转行为
   $("#my-modal-loading").modal(''open'');//开启加载中loading

   // $state.go("login",{from:fromState.name,w:''notLogin''});//跳转到登录界面
  }
 });
});

import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from "@angular/router";

interface RouterStroageObject {
    snapshot: ActivatedRouteSnapshot;
    handle: DetachedRouteHandle;
}

export class RouterStrategy implements RouteReuseStrategy {

    storedRoutes: { [key: string]: RouterStroageObject } = {};
    storedData: { [key: string]: any } = {};


    /**
     * 
     * 路由离开时是否需要保存页面，这是实现自定义路由复用策略最重要的一个方法。
其中：

返回值为true时，路由离开时保存页面信息，当路由再次激活时，会直接显示保存的页面。

返回值为false时，路由离开时直接销毁组件，当路由再次激活时，直接初始化为新页面。
     */
    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        // console.log(''shouldDetach的事件中的route'', route)
        if (route.data.noReuse) {
            return false
        }
        return true
    }

    /**
如果shouldDetach方法返回true，会调用这个方法来保存页面。
     */
    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        // console.log(''store的事件'', ''route'', route, ''handle'', handle);
        const storedRoute: RouterStroageObject = {
            snapshot: route,
            handle: handle
        }
        this.storedRoutes[this.getRouteUrl(route)] = storedRoute;
        // console.log(''this.storedRoutes'', this.storedRoutes)
    }

    /**
     * 
路由进入页面时是否有页面可以重用。 true： 重用页面，false：生成新的页面
     */
    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        return !!route.routeConfig && !!this.storedRoutes[this.getRouteUrl(route)];
    }

    /**
     * 
路由激活时获取保存的页面，如果返回null，则生成新页面
     */
    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
        if (!route.routeConfig || route.routeConfig.loadChildren || !this.storedRoutes[this.getRouteUrl(route)]) {
            return null
        }
        return this.storedRoutes[this.getRouteUrl(route)].handle
    }

    /**
     * 
     决定跳转后是否可以使用跳转前的路由页面，即跳转前后跳转后使用相同的页面
     */
    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        return future.routeConfig === curr.routeConfig && JSON.stringify(future.params) === JSON.stringify(curr.params);
    }

    private getRouteUrl(route: ActivatedRouteSnapshot) {
        //@ts-ignore
        const url = route[''_routerState''].url;
        const path = url.replace(/\//g, ''_'') + ''_'' + (route.routeConfig?.loadChildren || route.routeConfig?.component?.toString().split(''('')[0].split('' '')[1]);
        return path
    }

}

import { NgModule } from ''@angular/core'';
import { RouteReuseStrategy, RouterModule, Routes } from ''@angular/router'';
import { RouterStrategy } from ''./routerStrategy'';
import { Test1ComponentComponent } from ''./test1-component/test1-component.component'';
import { Test2ComponentComponent } from ''./test2-component/test2-component.component'';

const routes: Routes = [
  { path:'''',pathMatch:''full'',redirectTo:''/test1'' },
  { path:''test1'',component:Test1ComponentComponent,data:{noReuse:false} },
  { path:''test2'',component:Test2ComponentComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers:[
    {provide:RouteReuseStrategy,useClass:RouterStrategy}
  ]
})
export class AppRoutingModule { }