Angular 路由(routing)基本配置
本节我们学习路由知识点,假如我们有三个自定义组件,分别是【首页|home】,【设置|set】和【更多|more】,需要动态挂载在根组件【app.component.html】中,当浏览器url地址输入对应组件名称,动态显示该组件对应的内容,这就是动态路由;
- 使用 CLI 创建一个项目并配置默认路由:
ng new demo01 --routing
在新建的项目【demo01】的根组件上面就会多一个ts文件【app-routing.module.ts】
此时在【app.module.ts】文件中就会新增如下信息:
import { AppRoutingModule } from './app-routing.module';//同时在imports中声明
imports: [ //此处是模块声明 BrowserModule,FormsModule,AppRoutingModule, /* Routing */HttpClientModule /* HttpClient */
],
同时在根组件的【app.component.html】文件中默认添加如下信息:
<router-outlet></router-outlet>
- 创建组件【home,set,more】
ng generate component components/home
ng generate component components/set
ng generate component components/more
路由基本配置
- 在【app-routing.module.ts】文件中配置组件路由信息:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';//引入(需要的)自定义组件
import { HomeComponent } from './components/home/home.component';
import { SetComponent } from './components/set/set.component';
import { MoreComponent } from './components/more/more.component';/* 【路由配置信息】 */
/* 路由配置使用符号“**”匹配时,注意顺序,路由匹配到信息不会再往后匹配 */
const routes: Routes = [// {path:'', pathMatch:'full', redirectTo:'home'}, /* 当为''的时候,从下面定义的路由中寻找,重定向到指定的组件home */// {path:'', component: HomeComponent}, /* 当为''的时候,重定向到指定的组件home */{path:'home',component: HomeComponent},{path:'set',component: SetComponent},{path:'more',component: MoreComponent},{path:'**', redirectTo:'home'} /* [**]任意路由,匹配不到路由的时候加载组件或者跳转(重定向)的路由 */];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }
以上配置就实现路由链接的基本配置;
默认选中路由
- 在根组件【app.component.html】文件中编写基本标签:
<p>我是根组件</p>
<figure><p>默认选中路由</p><h3><a title="原生默认" href="http://www.jd.com" target="_blank">我们去京东</a> <a title="blank打开" target="_blank" routerLink="/home" routerLinkActive="active">首页</a> <a title="self打开" target="_self" routerLink="/set" routerLinkActive="active">设置</a> <a title="top打开" target="_top" routerLink="/more" routerLinkActive="active">更多</a> <!-- 【等效代码】 --><a [routerLink]="['/home']" routerLinkActive="active">首页</a> <a [routerLink]="['/set']" routerLinkActive="active">设置</a> <a [routerLink]="['/more']" routerLinkActive="active">更多</a> </h3>
</figure>
<hr/><router-outlet></router-outlet>
为了区分在每个组件中都标记个信息,同时在根组件的html页面中添加个横线分隔区分,当选择首页的时候,下面就显示首页的信息,同时为路由激活状态(此处未编写对应的css样式),运行效果如下:
以上就是对ng 路由的基本配置介绍,下一篇我们继续介绍【路由传参】。
Angular 路由(routing)基本配置相关推荐
- Angular 路由守卫
1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...
- Angular 路由
Angular 路由 简单路由配置 每个带路由的 Angular 应用都有一个Router(路由器)服务的单例对象. 当浏览器的 URL 变化时,路由器会查找对应的 Route(路由),并据此决定该显 ...
- 简单而又常用的基本的交换路由的一些配置命令
1.在基于IOS的交换机上设置主机名/系统名: switch(config)# hostname hostname 在基于CLI的交换机上设置主机名/系统名: switch(enable) set s ...
- angular路由笔记_Angular2学习笔记——路由器模型(Router)
Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的 ...
- 静态路由特点及其配置
许多人错误地认为静态路由很简单,就一个命令,没什么好学的.其实这是因为他们根本没有深入理解静态路由的工作原理,对于仅有一条静态路由配置命令中的各参数和选项的含义和使用方法也是一知半解,结果造成的是遇到 ...
- 华为路由器负载均衡_华为OSPF路由负载分担配置示例
华为OSPF路由负载分担配置示例 1.组网需求 图1 OSPF负载分担组网示例图 如图1所示,OSPF网络中有四台交换机,同属于区域0.要求配置负载分担,使得SwitchA流量,可以分别通过Switc ...
- angular 路由项目例子
angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...
- angular路由详解
angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...
- 静态路由概念及配置命令
静态路由 静态路由(英语:Static routing),一种路由的方式,路由项(routing entry)由手动配置,而非动态决定.与动态路由不同,静态路由是固定的,不会改变,即使网络状况已经改变 ...
最新文章
- Annual Review of Microbiology : 珊瑚微生物组:关乎珊瑚生态系统的健康与恢复
- JavaScript 的参数 arguments 和 return
- memcached java 多线程_springboot使用memcache缓存
- Java中文问题详解
- win7-64bit 下oracle11g plsql 的正确安装
- 【华为云技术分享】《跟唐老师学习云网络》 - Kubernetes网络实现
- vue node php,vue node 是什么
- Java实现通过ssh远程连接主机并执行命令
- syntax error: unrecognized tag:
- hashmap 线程不安全
- sql优化常用的几种方法:19种最有效的sql优化技巧
- USB加密狗复制USBTrace数据截取工具分享
- cartographer基于3d地图的纯定位模式
- 什么是机器翻译,主要有哪几种类型?
- 二字动词 复盘赋能_【格格读书成长营】用复盘来为自己赋能
- python验证账号密码登录
- 常见的对称式加密与非对称式加密算法
- java命名规则与规范
- 使用Velocity导出Word文档
- npm ERR! code 128npm ERR! An unknown git error occurrednpm ERR! command git --no-replace-objects l