学习路由的相关内容

学习目标：

1.路由的基础知识

2.子路由、保护路由和辅助路由

3.路由实例

一.路由基础知识

首先,新建一个项目：ng new projectname --routing

名称
简介
Routes

路由配置，保存着哪个url对应哪个组件，以及在哪个RouterOutlet中展示组件


RouterOutlet
在Html中标记路由内容呈现位置的占位符指令。Router

负责在运行时执行路由的对象，可以通过调用其navigate()和navigateByUrl()方法来导航到一个指定的路由。在component.ts文件中，通过点击事件来跳转路由，例子：

this.router.navigate(['/product'，2])

RouterLink
在HTML中声明路由导航用的指令ActivatedRoute
当前激活的路由对象,保存着当前路由信息，如路由地址，路由参数等。传递路由参数时需要用到,如路由地址，路由参数等。通常写在路由配置Routes的component组件中的componnet.ts文件中

接着，来看一下，这5个对象在实际代码是怎么写的。

首先，声明一下，使用[ng new projectname --routing]，带--routing参数生成的项目会新增一个路由配置文件。

接着，步一：来在项目中新增两个组件，ng g component home 和 ng g component product

说明：要写一个点击home页路由跳转到home组件里，点击product跳转到商品信息组件product组件里

步二：在图中选中的文件内添加内容=》

步三: 在app-routing.module.ts中引入这两个组件文件的类

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

import {ProductComponent} from './product/product.component';

步四：在app-routing.module.ts中，接着写路由的配置

const routes: Routes = [

{ path:' ' , component: HomeComponent },

{ path:'product', component: ProductComponent },

] 注意：path项里不能用 '/' 开头

步五：在app.component.html中

<a [routerLink]="['/']">主页</a>

<a [routerLink] = "['/product']">商品详情</a> 注意：必须用'/'，和 './'来体现是路由到根路由还是子路由

效果展示：