angular2路由

最新推荐文章于 2023-05-31 14:02:29 发布

CPlusPlusLove

最新推荐文章于 2023-05-31 14:02:29 发布

阅读量2.4k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/chenjh213/article/details/72810955

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

首先谈谈App应用,平时我们用的App总是多页面,如果用原生Android或者IOS,当然流畅.
但是当我们用原始Html开发页面,用< a href="#"></a>这样的标签去链接页面,切换起来没有那么流畅,页面加载进来也慢.
在Angular开发前端构建单页面应用(SPA)时,可以用路由进行切换,因为在加载Angular应用时,会整个缓存在手机上.我们用路由进行切换时,不用再发起HTTP请求了,体验得到优化.

基础知识

大多数带路由的应用都需要在index.html的<head>标签下添加一个<base>元素,来告诉路由器如何合成导航用的URL;

<base href="/">

编辑src/app/app.module.ts文件

import { RouterModule, Routes } from '@angular/router';

配置路由

当浏览器的URL变化时,路由器会查找对应的Route
并用RouterModule.forRoot方法来配置路由器，并把它的返回值添加到AppModule的imports数组中。

编辑`src/app/app.routes.ts`

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppNavBarComponent } from './components/app-navbar/app.my-navbar';
import { AppLoginFormComponent } from './components/app-loginform/app.loginform';
import { AppPagenotfoundComponent } from './components/app-pagenotfound/app-pagenotfound.component';
import { AppIndexComponent } from './components/app-index/app-index.component';


const appRoutes: Routes = [
  { path: 'login', component: AppLoginFormComponent },
  {
    path: 'index',
    component: AppIndexComponent,
    data: { title: 'Index' }
  },
  { path: '', redirectTo: '/index', pathMatch: 'full' },
  { path: '**', component: AppPagenotfoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
    // other imports here
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutesModule { }

路由中的空路径（''）表示应用的默认路径，当URL为空时就会访问那里，因此它通常会作为起点。这个默认路由会重定向到URL/index，并显示AppIndexComponent。

最后一个路由中的**路径是一个通配符。当所请求的URL不匹配前面定义的路由表中的任何路径时，路由器就会选择此路由。这个特性可用于显示“404 - Not Found”页，或自动重定向到其它路由。

路由出口

<router-outlet>标记出路由器该在哪里显示视图

编辑`app.component.html`

<app-navbar></app-navbar>
<router-outlet></router-outlet>

router-outlet必须在根组件中,通过根组件管理其他组件.

路由器链接

RouterLink指令可以让路由器控制 <a>标签
RouterLinkActive指令可以帮用户在外观上区分出当前选中的“活动”路由。当与它关联的RouterLink被激活时，路由器会把CSS类active添加到这个元素上

编辑`app/components/app-navbar/app.my-navbar.html`

<ul class="nav navbar-nav navbar-right">
    <li>
        <a routerLink="/login" routerLinkActive="active">登录</a>
    </li>
    <li>
        <a routerLink="/index" routerLinkActive="active">注册</a>
    </li>
    <li>
        <a routerLink="/index" routerLinkActive="active">{{ title }}</a>
    </li>
</ul>

编辑`app.module.ts`

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';

import { AppRoutesModule } from './app.routes';
import { AppComponent } from './app.component';
import { AppNavBarComponent } from './components/app-navbar/app.my-navbar';
import { AppLoginFormComponent } from './components/app-loginform/app.loginform';
import { AppPagenotfoundComponent } from './components/app-pagenotfound/app-pagenotfound.component';
import { AppIndexComponent } from './components/app-index/app-index.component';

@NgModule({
  declarations: [
    AppComponent,
    AppNavBarComponent,
    AppLoginFormComponent,
    AppPagenotfoundComponent,
    AppIndexComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    JsonpModule,
    AppRoutesModule
  ],
  providers: [],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

这里写图片描述

参考

路由与导航

CPlusPlusLove

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular2路由

首先谈谈App应用,平时我们用的App总是多页面,如果用原生Android或者IOS,当然流畅. 但是当我们用原始Html开发页面,用< a href="#"></a>这样的标签去链接页面,切换起来没有那么流畅,页面加载进来也慢. 在Angular开发前端构建单页面应用(SPA)时,可以用路由进行切换,因为在加载Angular应用时,会整个缓存在手机上.我们用路由进行切换时,不用再发起HTTP请
复制链接

扫一扫