本人原来是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. 简单http文件服务器

    日常工作中,主要是通过ssh终端(putty等)远程开发,经常涉及到传输文件,因为本地系统为Win10,所以没办法利用强大的linux脚本来进行文件传输.之前用过python的SimpleHttp模块 ...

  2. mdb导入SqlServer

    弄了一份医案数据库,打开一看...命名全中文,好吧,导入SQLServer走起 SQL: SELECT * INTO newtable FROM OPENDATASOURCE ('Microsoft. ...

  3. cryptojs的使用

    项目中经常会遇到加密解密的需求,这里有一个js库非常好用,就是crypto-js.下面记录一下使用方法. 首先,安装js库 npm install crypto-js --save 然后,在项目中使用 ...

  4. hibernate的事务管理和session对象的详解

    //开启事务 transaction=session.beginTransaction(); 上面为开启事务 transaction.commit();这个为提交事务 从session对象中获取事务后 ...

  5. .NET Core阿里大于短信发送SDK修改以及使用

    一.问题背景 继上次七牛云SDK的问题之后(参考:http://www.cnblogs.com/OMango/p/8447480.html),在发送短信的功能上又出现了问题,我们短信服务使用的是阿里大 ...

  6. mysql4 - 高级操作

    一.联结(使用 where(早) 和 join(晚) 都可以完成联结) 1.1 从 Teacher 表和 Profession 表中,查询出老师的名字和所属专业的名称. SELECT t.`l_nam ...

  7. MysqL应该考虑到的安全策略

    1:使用预处理语句防止SQL注入2:写入数据库的数据要进行特殊字符的转义,比如字符中带单引号和双引号需要在应用层转义,这样为了防止SQL注入3:查询的错误信息不要返回给用户,将错误记录到日志.错误信息 ...

  8. Java——正则表达式

    题目: java中提供了对正则表达式的支持. 有的时候,恰当地使用正则,可以让我们的工作事半功倍! 如下代码用来检验一个四则运算式中数据项的数目,请填写划线部分缺少的代码. 注意:只填写缺少代码,不要 ...

  9. POJ - 3984 bfs [kuangbin带你飞]专题一

    bfs搜索过程中将路径保存下即可. AC代码 #include<cstdio> #include<cstring> #include<algorithm> #inc ...

  10. 设置TCP_USER_TIMEOUT参数来判断tcp连接是否断开

    [TOC] 1. bug描述 前段时间遇到这样的一个问题,openstack一个控制节点宕机后,在宕机后一段时间内创建的虚拟机,一直卡在创建中的状态.有的甚至要等到16分钟之后虚拟机才会切换到下一个状 ...