# 路由
路由简单定义，根据不同的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()`都是可以的
