angular7 ----路由 --【页面跳转 / 默认路由 / 默认选中路由 】

写一点儿angular7 的路由基础的东西  一个带路有导航栏的一个例子 

一：用angular创建一个默认带路由的项目；（上一篇里面有详细介绍）

二：创建需要的组件 ；(这里就用3个组件来举例子，自己可以根据实际需求添加)

1. 创建home 组件    ng g c home
2. 创建goods组件    ng g c goods
3. 创建message组件    ng g c message

三：打开项目文件 找到 app-routing.module.ts  进行路由配置

 

 

开始配置路由  这里就以这三个组件为例：

 

四：编辑挂载组件的html；  (本文中 三个组件均挂载在根组件下  所以在 app.component.html 中简单的编辑页面)

 

其实这个时候基础的路由已经配置好了   可以点击    首页 / 商品 / 消息    看浏览器地址对应的变化   接下来再添加样式 美化一下 

 

因为基础的页面是在根组件  所以在根组件的CSS文件里  写入如下样式 ； （本文中仅是为了演示基础的带有路由的导航栏，所以写的比较基础 ）

页面变成这个样子   （要更改每个组件下的内容  需要到对应的组件的html中去编辑）

 

四：设置默认选中路由  和路由选中状态  （routerLinkActive="active"）

在根组件 app.component.html 对应的 app.component.scss 中添加 

 

这个时候再看页面就已经好了 

 

五：设置默认选中路由 

然后就没有然后了   希望可以通过这种方式 对更多刚接触angular的小伙伴有些许的帮助