学习路由的相关内容
学习目标：
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> 注意：必须用'/'，和 './'来体现是路由到根路由还是子路由
效果展示：
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
