详解Angular之路由基础

一、路由相关对象

router和routerlink作用一样，都是导航。router是在controller中用的，routerlink是在模版中用到。

二、路由对象的位置

1、routes对象

配置在模块中。routes由一组配置信息组成，每个配置信息至少包含两个属性，path和component。

2、routeroutlet

在模版中

3、routerlink

指令，在模版中生成链接改变url

4、router

在controller中，调用router对象的navigate方法，路由切换。

5、activatedroute

路由时候通过url传递数据，数据会保存在activatedroute对象中。

三、路由配置

使用ng new --routing参数时候会多生成出来一个app-routing.module.ts文件

会自动imports到app.module.ts中。

生成两个组件home组件和component组件。

注意：

1、path路径配置不能以斜杠开头，不能配置成path:'/product'。

因为angular路由器会解析和生成url，不用/开头是为了在多个视图之间导航时能*的使用相对路径和绝对路径。

2、在模版中写路径时，必须用/开头。

因为用斜杠加.表示要导航到根路由(/)还是子路由(./)。

/就是导航到根路由，从配置根路由那一层找。

3、在<router-outlet>下面显示组件内容

4、routerlink参数是一个数组而不是字符串

因为在路由时候可以传递参数。

四、代码中通过router对象导航

模版上加一个按钮

controller中使用router.navigate导航。

navigate参数和routerlink参数配置一样。

点按钮和点链接效果一样。

五、配置不存在的路径

生成code404组件显示页面不存在。

路由匹配先匹配者优先，所以**通配符路由要放最后。

六、重定向路由

一个地址重定向到另一个指定组件

www.aaa.com => www.aaa.com/products

www.aaa.com/x => www.aaa.com/y 用户可能已经收藏了x地址。

用重定向路由

七、在路由时候传递数据

有3种方式

1、在查询参数中传递数据

2、在路由路径中传递数据

定义路由路径时就要指定参数名字，在实际路径中携带参数。

3、在路由配置中传递数据

以上就是详解angular之路由基础的详细内容，更多关于angular之路由基础的资料请关注其它相关文章！