1.创建新项目

2.创建home news newscontent 组件

3.找到app-rounting-moudle.ts配置路由

  1)引入组件

 import { HomeComponent } from './home/home.component';
import { NewsComponent } from './news/news.component';
import { NewscontentComponent } from './newscontent/newscontent.component';

  2)配置路由

const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'news', component: NewsComponent},
{path: 'newscontent/:id', component: NewscontentComponent},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
} ];

4. 找到 app.component.html 根组件模板,配置 router-outlet 显示动态加载的路由

<h1>
<a routerLink="/home">首页</a> <a routerLink="/news">新闻</a>
</h1>
<router-outlet></router-outlet>
 <a routerLink="/home">首页</a> <a routerLink="/news">新闻</a>
//匹配不到路由的时候加载的组件 或者跳转的路由 {
path: '**', /*任意的路由*/ // component:HomeComponent redirectTo:'home'
}

Angular routerLinkActive 设 置 routerLink 默认选中路由

<h1>
<a routerLink="/home" routerLinkActive="active">首页</a> <a routerLink="/news" routerLinkActive="active">新闻</a>
</h1>

注意将样式放在全局样式中

.active{
color:red;
}

Angular中的routerLink 跳转页面和默认路由的更多相关文章

  1. JS请求服务器,并返回信息,请求过程中不需要跳转页面

    js请求服务器,并返回信息,请求过程中不需要跳转页面 这个可以通过jQuery框架轻松实现,jQuery中包含多种ajax的请求方式,详细可以参考下对应 的API. 你上面定义的按钮类型是submit ...

  2. Javaweb应用中配置错误跳转页面

    关于在Javaweb应用中配置错误跳转页面 应用场景,比如服务器的出现404错误,我们想让它返回跳转到我们自定义的错误页面 解决方法: 主要在web.xml文件中进行配置,这里玩的错误页面都单独放在e ...

  3. router-link跳转页面传递参数及页面刷新方法

    使用router-link传参: 第一种: 路径:http://localhost:8080/goodListP?id=2 跳转的页面获取参数: this.$route.query.id 第二种: 路 ...

  4. SharePoint中使用C#跳转页面的研究

    最近开发SharePoint的时候遇到问题,不能完成跳转,于是归纳了一下方法(最后还是使用了js跳转,后台跳转被sharepoint限制了). 1.最常用的页面跳转(原窗口被替代):Response. ...

  5. quasar框架在store中使用router跳转页面报错

    网上一通百度,终于在这篇博客中找到原因.  https://www.cnblogs.com/remly/p/12995936.html 原因是: 在router中导出了一个工厂函数, 既然是一个函数, ...

  6. Vue 编程式导航(通过js跳转页面)以及路由hash模式和history模式

    第一种方法: this.$router.push({path:'shopcontent?aid=3'}   第二种方法   this.$router.push({name:'news'}} 通过在ma ...

  7. 微信环境中如何实现跳转到手机默认外部浏览器下载apk文件

    由于微信的限制,应用文件在内置浏览器中下载全部被屏蔽掉,造成很多人用微信扫描二维码下载时点击下载按钮没反应,我想到的是做一个提示用户在浏览器中打开下载.其实原来很简单,就是判断当前是在微信内置浏览器中 ...

  8. 提示框,对话框,路由跳转页面,跑马灯,幻灯片及list组件的应用

    目录: 主页面的js业务逻辑层 主页面视图层 主页面css属性设置 跳转页面一的js业务逻辑层 跳转页面一的视图层 跳转页面二的视图层 跳转页面三的js业务逻辑层 跳转页面三的视图层 跳转页面三的cs ...

  9. angular 跳转页面时传参

    首先,你需要已经配置过你的rout,比如: $stateProvider .state('firstPage',{ url:'/Page/firstPage', templateUrl: 'Page/ ...

随机推荐

  1. 40个优化你的php代码的小提示

    1. 若是一个办法可静态化,就对它做静态声明.速度可提拔至4倍. 2. echo 比 print 快. 3. 应用echo的多重参数(译注:指用逗号而不是句点)庖代字符串连接. 4. 在履行for轮回 ...

  2. 利用random模块做一个抢红包功能

    我们都知道random模块是一个生成随机数的模块,用它来做抢红包的功能很合适. 抢红包,抢到的金额是随机的,但怎么让每个人抢到的随机金额公平合理呢 比如:我想发一个100元的红包让10个人抢,我可以把 ...

  3. SQL进阶17-变量的声明/使用(输出)--全局变量/会话变量--用户变量/局部变量

    /*进阶17 变量 系统变量: 全局变量: 会话变量: 自定义变量: 用户变量: 局部变量: */ /* #一: 系统变量 #说明: 变量由系统提供,不是用户定义的,属于服务器层面 #使用的语法 #1 ...

  4. Error: EACCES: permission denied when trying to install ESLint using npm

    https://stackoverflow.com/questions/35954725/error-eacces-permission-denied-when-trying-to-install-e ...

  5. Luogu 4751 动态DP 模板

    题面 动态求最大独立集 题解 树剖后用矩阵转移. 具体见Tweetuzki的洛谷博客 CODE #include <bits/stdc++.h> using namespace std; ...

  6. [Angular 8] Calculate and Measure Performance budgets with the Angular CLI

    Measuring is extremely important, without numbers we don’t know about potential problems and we don’ ...

  7. LeetCode 246. Strobogrammatic Number

    原题链接在这里:https://leetcode.com/problems/strobogrammatic-number/ 题目: A strobogrammatic number is a numb ...

  8. php数据类型之​浮点型

    所谓浮点类型,可以理解为:我们数学里面的小数. [注意]关于精度.取值范围和科学型声明不是学习的重点.因为此块在实际开发中用的特别少.我们将此块的知识点的学习标注为,了解级别.直线电机滑台 声明方式分 ...

  9. Navicat连接Oracle报ORA-12737错误

    替换oci.dll 文件分享百度网盘:链接:https://pan.baidu.com/s/1wayojGlKcgdMRZTvBqAUgw 密码:3d6j 把下载的文件放到Navicat文件夹里,然后 ...

  10. redis默认端口6379以其名命名,是我孤陋寡闻了,是名性感美女(梅尔兹)

    阿莱西亚-梅尔兹Alessia Merz ,这位亚平宁半岛的性感女人,自从结婚之后就逐渐的淡出了人们的实现,曾经的尤文教母已经现在已经是两个孩子的母亲,但是最近的梅尔兹开始蠢蠢欲动,在相夫教子的同时, ...