(精华2020年6月10日更新)Angular实战篇 路由的使用

(持续更新)angular实战篇 专栏收录该内容
8 篇文章 0 订阅

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './components/home/home.component';

import { WelcomeComponent } from './components/home/welcome/welcome.component';
import { SettingComponent } from './components/home/setting/setting.component';
import { HttpComponent } from './components/http/http.component';
import { AxiosComponent } from './components/axios/axios.component';
import { NewsComponent } from './components/news/news.component';
import { NewsdetailComponent } from './components/newsdetail/newsdetail.component';
import { ProductComponent } from './components/product/product.component';

import { ProductdetailComponent } from './components/productdetail/productdetail.component';



const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    children: [{
      path: 'welcome',
      component: WelcomeComponent
    }, {
      path: 'setting',
      component: SettingComponent
    }, {
      path: '*',
      redirectTo: 'welcome'
    }]
  },
  {
    path: 'http',
    component: HttpComponent
  },
  {
    path: 'axios',
    component: AxiosComponent
  },
  {
    path: 'news',
    component: NewsComponent
  },
  {
    path: 'newsdetail',
    component: NewsdetailComponent
  },
  {
    path: 'product',
    component: ProductComponent
  },
  {
    path: 'product/detail/:id',   //动态传参
    component: ProductdetailComponent
  },
  {
    path: '*',
    redirectTo: '/home'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html

<div class="header">

    <a routerLink="/home" routerLinkActive="actived" >首页</a>
    <a routerLink="/http" routerLinkActive="actived" >请求</a>
    <a [routerLink]="['/axios']" routerLinkActive="actived" >axios</a>
    <a [routerLink]="['/news']" routerLinkActive="actived" >新闻</a>
    <a [routerLink]="['/product']" routerLinkActive="actived" >产品</a>
</div>

<router-outlet></router-outlet>
  • 1
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值