# 路由
路由簡單定義，根據不同的url展示不同的頁面效果，暫且認為是這樣。后面我們會詳細講解
>[warning] 我們刷新瀏覽器后發現會出現問題，會重新恢復到默認的效果。
:-: 
>[success] 解決
> 有兩種方法
> 1、本地存儲，并且 偵聽 2、hashchange
如果要用本地存儲，其實就是將標識符存儲到本地存儲內部。
如果用hashchange，其實就是將標識符添加到 `url` 上。如：[](http://localhost:63342/02vue%E5%85%B6%E5%AE%83%E8%AF%AD%E6%B3%95-%E6%89%A9%E5%B1%95/todolist.html?_ijt=g0fr2v4md8gaggbnrepv39pp0m#)[http://localhost:63342//todolist.html#all](http://localhost:63342//todolist.html#all)
## 路由
在這里我們采用一下第二種方式，學習一下如何使用路由。
### 修改結構
```
<footer id="footer"><span id="todo-count"><strong>0</strong>進行中</span>
<ul id="filters">
<li>
<a href="#all" :class="{selected:sign==='all'}">全部</a>
</li>
<li>
<a href="#activing" :class="{selected:sign==='activing'}" >進行中</a>
</li>
<li>
<a href="#completed" :class="{selected:sign==='completed'}" >已完成</a>
</li>
</ul>
<button id="clear-completed" style="">刪除完成</button>
</footer>
```
### 添加js和功能
```
function hash() {
var hash = location.hash.split('#')[1] || 'all'
vm.changeSign(hash);
}
window.onhashchange = hash
hash()
```
>[danger] 注意：在這里面將 `li>a`添加的功能刪除，通過監聽`hash`的變化取出 標識 `sign`。然后調用`vm`實例的`changeSign`方法也要注意默認也要讓其執行一下。
## BUG修復
:-: 
可以發現我們在選中已完成后，再添加數據，此時的數據都應該是進行中，應該不展示，但是現在還展示。原因是因為我們在改變list的時候curlist的值是取出本地存儲中所有所有數據
>[success] 解決：
> 取出的數據我們需要根據 我們當前的標識 再進行過濾
```
watch: {
list: {
handler() {
local.set(this.list)
this.curlist = filter[this.sign](this.list);
},
deep: true
}
}
```
>[info] 這里我們用`this.list`或是`local.get()`都是可以的
