1. 先回顧一下Location
1.1 導(dǎo)航到一個(gè)新頁面
window.location.assign("http://www.mozilla.org");? // or
window.location = "http://www.mozilla.org";
1.2?強(qiáng)制從服務(wù)器重新加載當(dāng)前頁面
window.location.reload(true);
1.3 repalce()方法
function reloadPageWithHash() {
????var initialPage = window.location.pathname; ????window.location.replace('http://example.com/#' + initialPage);
}
1. reload方法用于刷新當(dāng)前文檔，不從緩存中讀取，走一遍服務(wù)器。使用reload頁面內(nèi)的表單可能會(huì)重新提交
2. replace 指定URL替換當(dāng)前緩存在歷史里（客戶端）的項(xiàng)目，因此當(dāng)使用replace方法之后，你不能通過“前進(jìn)”和“后退”來訪問已經(jīng)被替換的URL。 頁面內(nèi)的表單不會(huì)重新提交
1.4 硬刷和軟刷區(qū)別
1. F5和crtl+R是軟刷，發(fā)送空的頭，如果頁面打開過服務(wù)器會(huì)返回302，走緩存
2. ctrl+F5? 重走服務(wù)器，頁面會(huì)返回200，不走緩存
1.5? search?屬性向服務(wù)器發(fā)送字符串?dāng)?shù)據(jù)
你可能不在意這個(gè)，但是你總會(huì)用到
function sendData (sData) {
????window.location.search = sData;
}
我總會(huì)拼接url?...來發(fā)送請(qǐng)求。其實(shí)是一樣的道理
2.0 Angular路由
2.1?routerLink
?<nav>
? ? <a routerLink="/home"></a>? ?//1
? ? <a [routerLink]="['/home',username]"></a>// 2
</nav>
通過roterLink不會(huì)刷新目前頁面，只會(huì)根據(jù)routerLink改變?yōu)g覽器的hash，導(dǎo)向?qū)?yīng)的視圖
routerLink可以接受一個(gè)數(shù)組，來動(dòng)態(tài)的改變url的值，以便我們傳遞特定的Url信息
2.2?routerLinkActive
實(shí)際開發(fā)中我們可能需要以下的場(chǎng)景就是，我們要知道當(dāng)前頁面激活的是哪一個(gè)路由。然后對(duì)應(yīng)的給某個(gè)激活的鏈接一個(gè)特殊的狀態(tài)類似與
我們需要以下操作
<a routerLink='/routerBlock'? routerLinkActive="active">路由與導(dǎo)航</a>
2.3?Router API
實(shí)際項(xiàng)目中我們可能希望自己通過js來后臺(tái)控制跳轉(zhuǎn)
// 我們需要把Router這個(gè)對(duì)象注入組件中，通過這個(gè)對(duì)象進(jìn)行跳轉(zhuǎn)
explort class Acomponent{
? ? constructor(
????????private router:Router
????){}
}
2.3.1 navigate
后臺(tái)通過邏輯來進(jìn)行跳轉(zhuǎn)
注意：如果在Acomponent組件中使用navicate，如果利用jumpTomanger改變參數(shù)跳轉(zhuǎn)當(dāng)前頁面，瀏覽器中的url和參數(shù)都不會(huì)改變，但是這個(gè)路由對(duì)象確實(shí)變化了，我們可以通過ActivatedRoute這個(gè)對(duì)象監(jiān)聽到變化
原因：navicate 是基于參數(shù)來改變組件視圖
2.3.2 navigateByUrl()
navicateByUrl()和navicate()相對(duì)的，navicateByUrl是真實(shí)的改變?yōu)g覽器Url來改變視圖
下面我們來看一個(gè)例子
瀏覽器的URL是 /classify/11/article/22(childComponent:com1)
通過router.navicate('/classify/22/aricle/33')
此時(shí)瀏覽器URL??/classify/22/article/33(childComponent:com1)
通過router.navicateByUrl('/classify/22/aricle/33')
此時(shí)瀏覽器URl? ? ? ?/classify/22/aricle/33
