vue-router 切换路由时数据如何重置？

Question

问题背景：
使用 vue 做了组件 home.vue，组件 home.vue 里面为 nav.vue 和 item.vue，组件 nav.vue 通过 vue-route 的路由功能控制显示不同列表，但都是重用 item.vue 以形成列表，但都是在同一个页面上显示。

---

当 url 链接发生变化时，比如：/#!/item/33，会触发 route ，代码如下：

...
route: {
    data ({ to }) {
        this.page = 1;
        ...
        //此处对page做相关操作，假设经过操作，page已经变为10了
        ...
    }
},
....

然后通过 nav 其他操作，url 又变化了，比如：/#!/item/20，同样会触发 route ，但是我在控制台打印 page 时，page 还是为 10，并没有变为1，导致读取不同列表时数据出错。

求解，搞了好久解决不了，我该怎么做？

---

已解决：从 vue-route 的钩子函数 canDeactivate 下手

Answer 1

watch:{
    '$route'(val){
        // reset data
    }
}
监听route的变化，从而每次变化重置数据

Answer 2

你可以使用vuet来统一管理页面的状态，你可以参考一下这个例子，vuet自带的route插件可以帮你自动清理页面的状态，自动更新数据