Angular路由
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