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

Karon_
  • 1.1k

问题背景:
使用 vue 做了组件 home.vue,组件 home.vue 里面为 nav.vueitem.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 下手

回复
阅读 11.3k
2 个回答
梦令布孑
  • 88
watch:{
    '$route'(val){
        // reset data
    }
}
监听route的变化,从而每次变化重置数据
宣传栏