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  进行路由配置

angular7 ----路由 --【页面跳转 / 默认路由 / 默认选中路由 】_第1张图片

 

 

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

angular7 ----路由 --【页面跳转 / 默认路由 / 默认选中路由 】_第2张图片

 

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

angular7 ----路由 --【页面跳转 / 默认路由 / 默认选中路由 】_第3张图片 

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

angular7 ----路由 --【页面跳转 / 默认路由 / 默认选中路由 】_第4张图片

 

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

angular7 ----路由 --【页面跳转 / 默认路由 / 默认选中路由 】_第5张图片

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

angular7 ----路由 --【页面跳转 / 默认路由 / 默认选中路由 】_第6张图片

 

四:设置默认选中路由  和路由选中状态  (routerLinkActive="active"

angular7 ----路由 --【页面跳转 / 默认路由 / 默认选中路由 】_第7张图片

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

angular7 ----路由 --【页面跳转 / 默认路由 / 默认选中路由 】_第8张图片

 

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

angular7 ----路由 --【页面跳转 / 默认路由 / 默认选中路由 】_第9张图片

 

五:设置默认选中路由 

angular7 ----路由 --【页面跳转 / 默认路由 / 默认选中路由 】_第10张图片

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

你可能感兴趣的:(angular)