(五)angular路由配置——基本路由

它是用来实现SPA单页面应用的主要方法


路由表格-2.jpg

1.最简单的路由配置其中,HomeComponent和ProuductComponent是组件名。
再根模块添加属性

未标题-1.jpg

也可以在新建项目中使用命令
ng new router --routing

path下面配置的路由不能出现'/'

未标题-3.jpg

2.模板上面的占位符 <router-outlet></router-outlet>

占位符

3.routerLink模板中的跳转命令

必须在上面加上'/' 表示根路由,参数是一个数组

占位符

4.通过ts脚本进行页面跳转。调取navigate方法

(click)事件绑定 注意constructor为他的构造函数。需要在其中引入Router对象

未标题-5.png

5.配置通用路由(防止未定义的路由引起页面报错)使用通配符'**'

把他放在路由的最后面。不然其他页面加载不上。

未标题-6.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 路由:根据不同地址加载不同组件,实现单页面应用 # 1 路由基础知识 ================= 在ang...
    __凌阅读 709评论 0 0
  • 一:路由基础 什么是路由: 在web开发中,路由的概念由来已久,简而言之,就是利用URL的唯一性来指定特定的事物,...
    真的稻城阅读 6,036评论 2 7
  • 路由是 Angular 应用程序的核心,它加载与所请求路由相关联的组件,以及获取特定路由的相关数据。这允许我们通过...
    semlinker阅读 12,208评论 4 16
  • 路由要解决的核心问题是通过建立URL和页面的对应关系,使得不同的页面可以用不同的URL表示。在angular中,页...
    oWSQo阅读 1,305评论 0 1
  • 版本:4.0.0+2 有一些英雄指南应用的新需求: 添加一个仪表盘 视图。 添加在英雄 视图和 仪表盘 视图之间导...
    soojade阅读 1,343评论 0 0