先创建根路由
4-8 路由实战
快捷键会自动生成下面代码。生成的模板。
4-8 路由实战
这里是匹配一个空路径,默认什么都不填写,默认要显示的组件。
4-8 路由实战
不存在的路由要显示的页面
4-8 路由实战
按照顺序依次解析
4-8 路由实战
跟路由应forRoot。其他的模块是forChild
4-8 路由实战
根路径,我们一般是跳转到某一个路径。
4-8 路由实战

这里我们先不去演示重定向。默认先定义一个组件。
4-8 路由实战
在home下我们创建一个components
4-8 路由实战
创建一个index.ts

4-8 路由实战
生成一个组件
4-8 路由实战
在home-container内创建一个index.ts
4-8 路由实战
然后把这个组件导出
4-8 路由实战
home下的index.ts再导出
4-8 路由实战
在home模块这一级别我们也要建立index.ts

4-8 路由实战
导出模块和组件
4-8 路由实战
要在模块内这个组件
4-8 路由实战
这样路由内就可以导入这个组件了
4-8 路由实战
app模块导入根路由
4-8 路由实战
这里暂时先都删除
4-8 路由实战
在根模块中,我们只需要 router-outlet
4-8 路由实战
把原来根组件的代码都剪切到home-container组件中。
4-8 路由实战
ts内的也剪切过来
4-8 路由实战

homeContainer并没有在模块中,也没有导入进来。
4-8 路由实战
根模块导入HomeModule
4-8 路由实战

这样页面就正常访问了
4-8 路由实战

homeContainer组件的代码插入到了 router-outlet的下方。
4-8 路由实战

 

相关文章:

  • 2022-01-17
  • 2022-12-23
  • 2022-12-23
  • 2022-02-19
  • 2022-01-14
  • 2021-09-03
  • 2021-08-08
  • 2021-07-11
猜你喜欢
  • 2022-12-23
  • 2021-11-30
  • 2021-03-31
  • 2021-12-27
  • 2021-05-30
  • 2021-04-01
  • 2021-07-27
相关资源
相似解决方案