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

转载于:https://www.cnblogs.com/loaderman/p/10912118.html

Angular中的routerLink 跳转页面和默认路由相关推荐

vue中的倒计时跳转页面问题和axios网络请求this作用域问题
一.前言这两个是在日常开发中碰到的问题,网上都能查得到答案,但是我怕自己会忘记,姑且记录一下用作笔记吧. 二.vue倒计时跳转问题 1.案例比如我们在一次网络请求结束之后,如果返回结果是成功,则倒 ...
【微信小程序】小程序中几种跳转页面的方式
本期内容本期将介绍小程序中,几种跳转页面的方式以及区别目录 1.只能跳转到 tabBar 配置页面 2.返回上一级页面( delta:返回的页面数,默认值为 1,若 delta 大于现有页面数,则 ...
【vue-router①】router-link跳转页面传递参数 - 进击的前端之路（偶尔爬坑java小路） - SegmentFault 思否
在vue项目中,往往会遇到这样的情况,就是要实现在一个循环列表中,点击其中一条跳转到下个页面,然后将这一条的相关数据带到下个页面中显示,这是个循环列表,无论点哪一条都是跳到相同的页面,只是填的数据不一 ...
html5中如何自动跳转页面,实现HTML5上滑跳转页面的两种方法
方法一: jquery方法 movePage($('body')); function movePage(dom) { var startY, moveY, moveSpave; dom.on(&qu ...
html页面中Location对象跳转页面用法
姓名:<input name="name"/></br> 薪水:<input name="salary"/></br& ...
解决进入页面EditText默认自动获取焦点的方法
在项目中,一进入一个页面, EditText默认就会自动获取焦点. 那么如何取消这个默认行为呢? 解决之道:在EditText的父级控件中找一个,设置成 android:focusable=" ...
进入一个页面, EditText默认就会自动获取焦点的解决办法
在项目中,一进入一个页面, EditText默认就会自动获取焦点. 那么如何取消这个默认行为呢? 解决之道:在EditText的父级控件中找一个,设置成 android:focusable=" ...
Angular中实现动态路由跳转并传递参数
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
Angular中实现路由跳转并通过get方式传递参数
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...

Angular中的routerLink 跳转页面和默认路由

Angular中的routerLink 跳转页面和默认路由相关推荐

最新文章

热门文章