Angular routing生成路由和路由的跳转
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生成路由和路由的跳转的更多相关文章
- 使用Angular CLI生成路由
第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: & ...
- Angular创建路由从主界面跳转到我们的cesium界面
我们要在一个独立的顶级模块中加载和配置路由器,它专注于路由功能,然后由根模块 AppModule 导入它. 按照惯例,这个模块类的名字叫做 APPRoutingModule,并且位于 src/app ...
- Angular4中路由Router类的跳转navigate
最近一直在学习angular4,它确实比以前有了很大的变化和改进,好多地方也不是那么容易就能理解,好在官方的文档和例子是中文,对英文不太好的还是有很大帮助去学习. 官方地址:https://angul ...
- HCNA Routing&Switching之静态路由
前文我们聊到了路由的相关概念和路由基础方面的话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/14947897.html:今天我们聊聊静态路由相关话题: 回顾 ...
- vue-router同路由$router.push不跳转一个简单解决方案
vue-router同路由$router.push不跳转一个简单解决方案 vue-router跳转一般是这么写: toCurrentPage: function(thisId){ this.$rout ...
- vue+elementui搭建后台管理界面(5递归生成侧栏路由)
有一个菜单树,顶层菜单下面有多个子菜单,子菜单下还有子菜单... 这时候就要用递归处理 1 定义多级菜单 修改 src/router/index.js 的 / 路由 { path: '/', redi ...
- 每天一点点之vue框架开发 - vue-router路由进阶(路由别名、跳转、默认路由、二级路由、路由守卫)
路由别名 在main.js中的路由中添加name来创建别名 const routes = [ {path:'/footer',name:footerLink,component:Footer} ] ...
- react第十四单元(react路由-react路由的跳转以及路由信息)
第十四单元(react路由-react路由的跳转以及路由信息) #课程目标 理解前端单页面应用与多页面应用的优缺点 理解react路由是前端单页面应用的核心 会使用react路由配置前端单页面应用框架 ...
- react第十三单元(react路由-react路由的跳转以及路由信息) #课程目标
第十三单元(react路由-react路由的跳转以及路由信息) #课程目标 熟悉掌握路由的配置 熟悉掌握跳转路由的方式 熟悉掌握路由跳转传参的方式 可以根据对其的理解封装一个类似Vue的router- ...
随机推荐
- vue2.0--请求数据
vue中用vue-reouse请求来的数据,会被封装一层,如下图res:
- 破解sublime的sftp
http://www.dodobook.net/linux/2751,按照这个在Linux下操作(Windows下不行) 提示错误: File "/usr/lib/python2.7/sit ...
- iOS 正则表达式(一)
在iOS开发中,正则一直是最常用的,但也是一直记不住的,现在做一些简单的总结 我们在网上找的正则,要有'\',这个在iOS是转义符,需要'\\'这样 int main(int argc, const ...
- VS.C#如何向数据数据库中存入和读取图片的
写入图片部分代码:假设图片为 test.gifbyte [] bytes = File.ReadAllBytes(@"c:\test.gif");SqlConnection con ...
- 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
- [转]js刷新父窗体
浮层内嵌iframe及frame集合窗口,刷新父页面的多种方法 <script language=JavaScript> parent.location.reload(); ...
- Linux 压缩解压缩命令详解
tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个.下面的 ...
- Python学习记录之-----类
面向过程 VS 面向对象 编程范式 编程是 程序 员 用特定的语法+数据结构+算法组成的代码来告诉计算机如何执行任务的过程 , 一个程序是程序员为了得到一个任务结果而编写的一组指令的集合,正所谓条条大 ...
- 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 ...
- 微信小程序项目
大体思想 微信小程序,没有DOM和BOM概念,所以,不会涉及到操作节点.它的主要思想是操作数据,然后改变视图层,即MVVM,如果知道angularJS,能很快的理解上手小程序. 一些开发小程序时, ...