Angular路由

2018-07-23 本文已影响52人奔跑的蛙牛

1. 先回顾一下Location

1.1 导航到一个新页面

window.location.assign("http://www.mozilla.org"); // or

window.location = "http://www.mozilla.org";

1.2 强制从服务器重新加载当前页面

window.location.reload(true);

1.3 repalce()方法

function reloadPageWithHash() {

var initialPage = window.location.pathname; window.location.replace('http://example.com/#' + initialPage);

}

1. reload方法用于刷新当前文档，不从缓存中读取，走一遍服务器。使用reload页面内的表单可能会重新提交

2. replace 指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。页面内的表单不会重新提交

1.4 硬刷和软刷区别

1. F5和crtl+R是软刷，发送空的头，如果页面打开过服务器会返回302，走缓存

2. ctrl+F5 重走服务器，页面会返回200，不走缓存

1.5 search 属性向服务器发送字符串数据

你可能不在意这个，但是你总会用到

function sendData (sData) {

window.location.search = sData;

}

我总会拼接url?...来发送请求。其实是一样的道理

2.0 Angular路由

2.1 routerLink

<nav>

<a routerLink="/home"></a> //1

<a [routerLink]="['/home',username]"></a>// 2

</nav>

通过roterLink不会刷新目前页面，只会根据routerLink改变浏览器的hash，导向对应的视图

routerLink可以接受一个数组，来动态的改变url的值，以便我们传递特定的Url信息

2.2 routerLinkActive

实际开发中我们可能需要以下的场景就是，我们要知道当前页面激活的是哪一个路由。然后对应的给某个激活的链接一个特殊的状态类似与

图一

我们需要以下操作

<a routerLink='/routerBlock' routerLinkActive="active">路由与导航</a>

2.3 Router API

实际项目中我们可能希望自己通过js来后台控制跳转

// 我们需要把Router这个对象注入组件中，通过这个对象进行跳转

explort class Acomponent{

constructor(

private router:Router

){}

}

2.3.1 navigate

图二

后台通过逻辑来进行跳转

注意：如果在Acomponent组件中使用navicate，如果利用jumpTomanger改变参数跳转当前页面，浏览器中的url和参数都不会改变，但是这个路由对象确实变化了，我们可以通过ActivatedRoute这个对象监听到变化

原因：navicate 是基于参数来改变组件视图

2.3.2 navigateByUrl()

navicateByUrl()和navicate()相对的，navicateByUrl是真实的改变浏览器Url来改变视图

下面我们来看一个例子

浏览器的URL是 /classify/11/article/22(childComponent:com1)

通过router.navicate('/classify/22/aricle/33')

此时浏览器URL /classify/22/article/33(childComponent:com1)

通过router.navicateByUrl('/classify/22/aricle/33')

此时浏览器URl /classify/22/aricle/33