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


什么是路由

路由的目的是可以让根组件按照不同的需求动态加载不同的组件。

根据不同地址,加载不同组件,实现单页面应用。

Angular 命令创建一个配置好路由的项目

命令创建项目

ng new demo02 --routing

  

安装依赖

npm install

  

启动项目

ng serve --open

  

  

与没有创建路由的项目比较

创建路由项目的文件比没有创建路由项目的文件多了一个 app-routing.module.ts 文件。

  

然后在 app.module.ts 文件中引入了路由文件。

  

app.component.html 文件中加入了动态加载组件显示的地方。

路由学习案例

创建组件

创建几个组件,首先创建一个 components 文件夹存放将要创建的组件。

创建home组件

ng g component components/home

  

创建news组件

ng g component components/news

  

创建user组件

ng g component components/user

配置路由,点击不同的导航显示不同组件

在 app-routing.module.ts 中配置路由。

首先引入组件

// 引入组件
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,
}
];

  

    

添加导航按钮

在根组件 app.component.html 文件中添加导航。

<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
}

  

Angular routing生成路由和路由的跳转的更多相关文章

  1. 使用Angular CLI生成路由

    第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: & ...

  2. Angular创建路由从主界面跳转到我们的cesium界面

    我们要在一个独立的顶级模块中加载和配置路由器,它专注于路由功能,然后由根模块 AppModule 导入它. 按照惯例,这个模块类的名字叫做 APPRoutingModule,并且位于 src/app  ...

  3. Angular4中路由Router类的跳转navigate

    最近一直在学习angular4,它确实比以前有了很大的变化和改进,好多地方也不是那么容易就能理解,好在官方的文档和例子是中文,对英文不太好的还是有很大帮助去学习. 官方地址:https://angul ...

  4. HCNA Routing&Switching之静态路由

    前文我们聊到了路由的相关概念和路由基础方面的话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/14947897.html:今天我们聊聊静态路由相关话题: 回顾 ...

  5. vue-router同路由$router.push不跳转一个简单解决方案

    vue-router同路由$router.push不跳转一个简单解决方案 vue-router跳转一般是这么写: toCurrentPage: function(thisId){ this.$rout ...

  6. vue+elementui搭建后台管理界面(5递归生成侧栏路由)

    有一个菜单树,顶层菜单下面有多个子菜单,子菜单下还有子菜单... 这时候就要用递归处理 1 定义多级菜单 修改 src/router/index.js 的 / 路由 { path: '/', redi ...

  7. 每天一点点之vue框架开发 - vue-router路由进阶(路由别名、跳转、默认路由、二级路由、路由守卫)

    路由别名   在main.js中的路由中添加name来创建别名 const routes = [ {path:'/footer',name:footerLink,component:Footer} ] ...

  8. react第十四单元(react路由-react路由的跳转以及路由信息)

    第十四单元(react路由-react路由的跳转以及路由信息) #课程目标 理解前端单页面应用与多页面应用的优缺点 理解react路由是前端单页面应用的核心 会使用react路由配置前端单页面应用框架 ...

  9. react第十三单元(react路由-react路由的跳转以及路由信息) #课程目标

    第十三单元(react路由-react路由的跳转以及路由信息) #课程目标 熟悉掌握路由的配置 熟悉掌握跳转路由的方式 熟悉掌握路由跳转传参的方式 可以根据对其的理解封装一个类似Vue的router- ...

随机推荐

  1. vue2.0--请求数据

    vue中用vue-reouse请求来的数据,会被封装一层,如下图res:

  2. 破解sublime的sftp

    http://www.dodobook.net/linux/2751,按照这个在Linux下操作(Windows下不行) 提示错误: File "/usr/lib/python2.7/sit ...

  3. iOS 正则表达式(一)

    在iOS开发中,正则一直是最常用的,但也是一直记不住的,现在做一些简单的总结 我们在网上找的正则,要有'\',这个在iOS是转义符,需要'\\'这样 int main(int argc, const ...

  4. VS.C#如何向数据数据库中存入和读取图片的

    写入图片部分代码:假设图片为 test.gifbyte [] bytes = File.ReadAllBytes(@"c:\test.gif");SqlConnection con ...

  5. sudo安装某一文件报错:E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用) E: 无法锁定管理目录(/var/lib/dpkg/),是否有其他进程正占用它?

    报错原因:资源被占用 解决方法: sudo rm /var/cache/apt/archives/lock sudo rm /var/lib/dpkg/lock

  6. [转]js刷新父窗体

    浮层内嵌iframe及frame集合窗口,刷新父页面的多种方法   <script language=JavaScript>       parent.location.reload(); ...

  7. Linux 压缩解压缩命令详解

    tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个.下面的 ...

  8. Python学习记录之-----类

    面向过程 VS 面向对象 编程范式 编程是 程序 员 用特定的语法+数据结构+算法组成的代码来告诉计算机如何执行任务的过程 , 一个程序是程序员为了得到一个任务结果而编写的一组指令的集合,正所谓条条大 ...

  9. noip200605能量项链

    题解: 状态转移方程为:dp[i][j] = max{dp[i][k] + dp[k+1][j] + a[i]*a[k+1]*a[j+1]}, k=i, ..., j-1, i和j都从1开始.dp[i ...

  10. 微信小程序项目

    大体思想 微信小程序,没有DOM和BOM概念,所以,不会涉及到操作节点.它的主要思想是操作数据,然后改变视图层,即MVVM,如果知道angularJS,能很快的理解上手小程序.   一些开发小程序时, ...