Vue-router

使用 watch 监听 $router 的变化

在根目录里main.js里添加路由

import router from '@/router/index'

同时在new Vue里加上变量名

新建router文件夹/index.js,加下以上内容

新建views/Todos.Vue文件，同时把app.vue的内容迁移到odos.Vue,app.vue里只配置

添加路由

在底部导航配置 router-link 抽离容器组件 TheTodes 使用 watch 监听 $router 的变化，在触发的回调函数中获取 params 的值，修改 filter 数据。同时在页面 created 生命周期中也调用此回调函数。

对底部导航进行路由配置，v-for循环filters列表，当filter===key值时，去识别当前的filter，由此去切换路由。

:class绑定

我们可以向 v-bind:class 传入一个对象，来动态地切换 class

在Todos.Vue里使用 watch 监听 $router 的变化

当路由id为filter=”all”时，会切换回all状态，展示所有状态todos

当路由id为filter=”active”时，点击 active 状态，展示没有完成的todos

当路由id为filter=”completed”时，点击completed状态，展示已完成的 todos

当在某路由原地刷新，列表数据保持和路由对应的状态不变,通过created来实现