vue-router组件重用 路由切换时的问题

时间:2021-07-12 22:05:35

当一个组件被重用时,切换路由,该组件不会被销毁。该组件的created也不会被调用,如果在created中有获取数据的操作,切换路由后,就不会再获取新的数据了,界面上就没有刷新。

其实官方文档就有解决方法:

vue-router组件重用 路由切换时的问题

官方连接https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html

但是,这里还需要注意一点,beforeRouteUpdate只有这种情况才会被调用:当前路由改变,但是该组件被复用时调用。例如带动态参数的路径 /user/:id,
从 /user/1 切换到 /user/2时,由于会渲染同样的user组件,因此组件实例会被复用,这个钩子就会在这种情况下被调用。

如果是/adduser切换到/user/1是不会调用beforeRouteUpdate的,这种情况下应该使用watch。