本人原来是iOS开发，没想到工作后，离iOS开发原来越远，走上了前端的坑。一路走来，也没有向别人一样遇到一个技术上的师傅，无奈只能一个人苦苦摸索。如今又开始填angular的坑了。闲话不扯了。（本人学习是根据官网教程，如果想根据官网教程学习，我建议先把官网的例子先学一遍，路由的路基部分，都是根据这个例子来讲的）。https://www.angular.cn/（官网地址）本章部分基本是官网的内容。

基础知识

1.应用的开始都会有一个根目录开始，路由也一样，所以使用路由就在index.html的<head>标签下先添加一个<base>元素，来告诉路由器该如何合成导航用的URL。

2.在app.module.ts文件中导入需要的路由模块，记得把路由的组件也要导入进来。

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

3.配置路由

在@ngModule()上边创建路由数组

//path 路径参数(不能以/开头，路由会自己添加)，component是组件（也就是你要导航的目的页面）redirectTo：重定向  pathMath: 来告诉路由器如何用

URL去匹配路由的路径，** 通配符，当前面所有的路由都找不到的时候就会路由到这个组件

const  routes: Routes = [

{path:'home', component:HomeComponent },

{ path: 'hero/:id', component: HeroDetailComponent },//带参数的路由

{path:'　', redirectTo:'　', pathMath:‘full'}，

{ path: '**', component: PageNotFoundComponent }

];

@NgModule({

imports: [

RouterModule.forRoot(

appRoutes

)

]

})

4.在组件中创建路由出口

在需要路由的HTML页面，留下路由出口。例如app.component.html

<router-outlet></router-outlet>

5.路由链接（也就是点击跳转）。例如在app.component.html中

<h1>Angular Router</h1>

<nav>

<a routerLink="/home" routerLinkActive="active">Crisis Center</a>

</nav>

<router-outlet></router-outlet>

这样就完成了一个简单的页面路由。

喜欢的朋友填个关注，点个赞给个小小的鼓励。

angular路由详解一（基础知识）的更多相关文章

  1. Linux dts 设备树详解(一) 基础知识

    Linux dts 设备树详解(一) 基础知识 Linux dts 设备树详解(二) 动手编写设备树dts 文章目录 1 前言 2 概念 2.1 什么是设备树 dts(device tree)? 2. ...

  2. angular路由详解：

    1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...

  3. java中文乱码解决之道（二）-----字符编码详解：基础知识 + ASCII + GB**

    在上篇博文(java中文乱码解决之道(一)-----认识字符集)中,LZ简单介绍了主流的字符编码,对各种编码都是点到为止,以下LZ将详细阐述字符集.字符编码等基础知识和ASCII.GB的详情. 一.基 ...

  4. java中文乱码解决之道（二）—–字符编码详解：基础知识 + ASCII + GB**

    原文出处:http://cmsblogs.com/?p=1412 在上篇博文(java中文乱码解决之道(一)—–认识字符集)中,LZ简单介绍了主流的字符编码,对各种编码都是点到为止,以下LZ将详细阐述 ...

  5. angular路由详解六（路由守卫）

    路由守卫 CanActivate: 处理导航到某个路由的情况. CanDeactivate:处理从当前路由离开的情况. Resole:在路由激活之前获取路由数据. 1.CanActivate: 处理导 ...

  6. angular路由详解四（子路由）

    子路由是相对路由 路由配置部分: 主要是children const routes: Routes = [ {path:'home', component: HomeComponent, childr ...

  7. angular路由详解五（辅助路由）

    在HTML文件中 //主路由 <router-outlet></router-outlet> //辅助路由 <router-outlet  name="aux& ...

  8. angular路由详解三（路由参数传递）

    我们经常用路由传递参数,路由主要有三种方式: 第一种:在查询参数中传递数据 {path:"address/:id"}   => address/1  => Activa ...

  9. vue技术栈进阶（02.路由详解—基础）

    路由详解(一)--基础: 1)router-link和router-view组件 2)路由配置 3)JS操作路由

随机推荐

  1. golang 实现简单的一致性哈希

    package main import ( "fmt" "sort" "hash/crc32" ) var serverMap map[ui ...

  2. Python自动化--语言基础7--操作日志、加密、发送邮件、线程、生产者消费者

    1.操作日志 logging.basicConfig:日志的统一处理器,对日志的输出格式和方式做配置日志级别等级CRITICAL > ERROR > WARNING > INFO & ...

  3. 初步探究Android App API接口测试--实战

    一.Android App API接口测试 1.如何学好Android App API接口测试 postman可以用来实现API接口自动化测试,但是也有弊端,无法实现接口测试数据的参数化,为了达到接口 ...

  4. 通过修改注册表设置windows环境变量

    开发环境搭建每次都要设置很多环境变量, 一般是通过  [菜单]->[计算机]->[属性]->[高级设置]->[环境变量]进行设置,重装系统后,每次都要设置很多环境变量,很麻烦. ...

  5. 了解一下Http常见状态码、Http协议的工作特点和原理、Http请求Post与Get的区别

    HTTP协议常见状态码状态码的作用负责标记客户端请求服务器的返回结果,标记服务器端的处理是否正常,通知出现的错误等等职责,借助客户端可以知道客户端是否正常请求服务端.五大类:1XX(信息类状态码,接收 ...

  6. DxPackNet 3.音频捕捉（录音）

    用DxpackNet捕捉音频其实很简单 1.初始化控件 IDxMicrophCapture microphone; private void Form1_Load(object sender, Eve ...

  7. CodeForces-748B

    关键在于判断是否能够得到解决办法,我的思路就是用一个数组来记录每个小写字母对应的按键,如果它出现对应两个级以上不同的按键那么就说明不能得出解决办法,直接打印'-1'.如果能够得出解决办法,就扫描一下数 ...

  8. nyoj137 取石子（三） 楼教主男人八题之一

    思路:一堆时,N态.两堆时,当两堆数量相同,P态,不同为N态.三堆时,先手可以变成两堆一样的,必胜N态. 此时可以总结规律:堆数为偶数可能且石子数都是两两相同的,为P态.分析四堆时,当四堆中两两数量一 ...

  9. AGC010 - D: Decrementing

    原题链接 题意简述 给出一个个数的序列,足够聪明的AB两人轮流进行以下操作: 令一个大于1的数减1,然后所有数除以. 如果一个人不能操作了,那么他就输了. 输入保证所有数都是正整数并且. 分析 这是一 ...

  10. plx9030触发pci中断

    if(((SWAB_16(PLX_INT(0x4C)))&0x04)==0x04) { ErrNo = *(UINT16*)(g_MemBase+0XFFFE*2); /*logMsg(&qu ...