Angular中的routerLink 跳转页面和默认路由
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 跳转页面和默认路由的更多相关文章
- JS请求服务器,并返回信息,请求过程中不需要跳转页面
js请求服务器,并返回信息,请求过程中不需要跳转页面 这个可以通过jQuery框架轻松实现,jQuery中包含多种ajax的请求方式,详细可以参考下对应 的API. 你上面定义的按钮类型是submit ...
- Javaweb应用中配置错误跳转页面
关于在Javaweb应用中配置错误跳转页面 应用场景,比如服务器的出现404错误,我们想让它返回跳转到我们自定义的错误页面 解决方法: 主要在web.xml文件中进行配置,这里玩的错误页面都单独放在e ...
- router-link跳转页面传递参数及页面刷新方法
使用router-link传参: 第一种: 路径:http://localhost:8080/goodListP?id=2 跳转的页面获取参数: this.$route.query.id 第二种: 路 ...
- SharePoint中使用C#跳转页面的研究
最近开发SharePoint的时候遇到问题,不能完成跳转,于是归纳了一下方法(最后还是使用了js跳转,后台跳转被sharepoint限制了). 1.最常用的页面跳转(原窗口被替代):Response. ...
- quasar框架在store中使用router跳转页面报错
网上一通百度,终于在这篇博客中找到原因. https://www.cnblogs.com/remly/p/12995936.html 原因是: 在router中导出了一个工厂函数, 既然是一个函数, ...
- Vue 编程式导航(通过js跳转页面)以及路由hash模式和history模式
第一种方法: this.$router.push({path:'shopcontent?aid=3'} 第二种方法 this.$router.push({name:'news'}} 通过在ma ...
- 微信环境中如何实现跳转到手机默认外部浏览器下载apk文件
由于微信的限制,应用文件在内置浏览器中下载全部被屏蔽掉,造成很多人用微信扫描二维码下载时点击下载按钮没反应,我想到的是做一个提示用户在浏览器中打开下载.其实原来很简单,就是判断当前是在微信内置浏览器中 ...
- 提示框,对话框,路由跳转页面,跑马灯,幻灯片及list组件的应用
目录: 主页面的js业务逻辑层 主页面视图层 主页面css属性设置 跳转页面一的js业务逻辑层 跳转页面一的视图层 跳转页面二的视图层 跳转页面三的js业务逻辑层 跳转页面三的视图层 跳转页面三的cs ...
- angular 跳转页面时传参
首先,你需要已经配置过你的rout,比如: $stateProvider .state('firstPage',{ url:'/Page/firstPage', templateUrl: 'Page/ ...
随机推荐
- 40个优化你的php代码的小提示
1. 若是一个办法可静态化,就对它做静态声明.速度可提拔至4倍. 2. echo 比 print 快. 3. 应用echo的多重参数(译注:指用逗号而不是句点)庖代字符串连接. 4. 在履行for轮回 ...
- 利用random模块做一个抢红包功能
我们都知道random模块是一个生成随机数的模块,用它来做抢红包的功能很合适. 抢红包,抢到的金额是随机的,但怎么让每个人抢到的随机金额公平合理呢 比如:我想发一个100元的红包让10个人抢,我可以把 ...
- SQL进阶17-变量的声明/使用(输出)--全局变量/会话变量--用户变量/局部变量
/*进阶17 变量 系统变量: 全局变量: 会话变量: 自定义变量: 用户变量: 局部变量: */ /* #一: 系统变量 #说明: 变量由系统提供,不是用户定义的,属于服务器层面 #使用的语法 #1 ...
- 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 ...
- Luogu 4751 动态DP 模板
题面 动态求最大独立集 题解 树剖后用矩阵转移. 具体见Tweetuzki的洛谷博客 CODE #include <bits/stdc++.h> using namespace std; ...
- [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’ ...
- LeetCode 246. Strobogrammatic Number
原题链接在这里:https://leetcode.com/problems/strobogrammatic-number/ 题目: A strobogrammatic number is a numb ...
- php数据类型之浮点型
所谓浮点类型,可以理解为:我们数学里面的小数. [注意]关于精度.取值范围和科学型声明不是学习的重点.因为此块在实际开发中用的特别少.我们将此块的知识点的学习标注为,了解级别.直线电机滑台 声明方式分 ...
- Navicat连接Oracle报ORA-12737错误
替换oci.dll 文件分享百度网盘:链接:https://pan.baidu.com/s/1wayojGlKcgdMRZTvBqAUgw 密码:3d6j 把下载的文件放到Navicat文件夹里,然后 ...
- redis默认端口6379以其名命名,是我孤陋寡闻了,是名性感美女(梅尔兹)
阿莱西亚-梅尔兹Alessia Merz ,这位亚平宁半岛的性感女人,自从结婚之后就逐渐的淡出了人们的实现,曾经的尤文教母已经现在已经是两个孩子的母亲,但是最近的梅尔兹开始蠢蠢欲动,在相夫教子的同时, ...