普通路由项目
- 创建一个带路由的项目
- 创建需要的组件
- 找到app-routing.module.ts配置路由
引入组件 配置路由
匹配不到路由的时候加载的组件 或者跳转的路由
{ path:"**", redirectTo:"home"}
设置默认选中路由
<a [routerLink]="[ '/home']" routerLinkActive="active">首页</a>
内置模块
- 创建模块 ng g module 模块名
- 引入配置 import
- 在创建的模块根组件里 暴露 exports
Exports:[UserComponent] - 在项目根组件里引入自定义模块
Import { UserModule } from ‘./创建的模块名/模块名.module’
懒加载
- 创建带路由的模块
Ng g module module/user --routing - 创建模块的根组件
- 在模块内创建需要的组件
- 在每个模块的路由组件导入并声明
- 跟模块的路由配置地址(不需要导入模块)
Path:’user’, loadChildren: ‘./模块名/模块下组件名/组件名.module#跟模块名’ - 在根组件的HTML中使用
<a [routerLink]=”[‘/user’]”>用户模块
如需访问 模块下/url 需要在对应模块的路由中进行配置
路由传值
1 动态路由传值
app.get('/url/:ard',function(req,res){
//利用req.params获取动态值
var ard=req.params.ard
})
2 GET 传值
//url==localhost:3000/url?ard=123
app.get('/url',function(req,res){
//利用req.query获取动态值
var ard=req.query.ard
})