组件复用会在两种情况下发生:
1、使用 keep-alive 时,页面再次跳转时,数据不更新
每一次路由的切换都会导致页面被重新渲染,无论是各种钩子还是异步获取数据函数都会被执行,为了提高网站性能,可以使用 keep-alive 包裹住 router-view,当路由的内容被加载过一次之后,就把内容放到内存中,下一次再进这个路由时,不需重新渲染这个页面,直接从内存中将内容取出放到页面中。
此时有两种选择可以处理组件复用时导致数据不刷新的问题:
1)如果一个页面需要动态获取数据的组件很多,那么就直接将此组件设置不实用 keep-alive 即可;
2)如果一个页面只有一两个组件需要动态获取数据,那么就在 activated 钩子中重新向后端获取部分组件的数据,如果不是实时动态获取数据,而只是在用户有相关操作时需要获取数组,那么可以结合一个公共的布尔变量来判断是否需要重新获取数据。那么这种方式又可以使用 keep-alive 来提高性能,又可以避免它带来的问题。
2、同一组件,参数变化,页面数据不更新的问题
比如说在详情页之间切换时,会导致不同详情页出现同一批数据的结果,这是 router-view 复用组件导致的问题。
1)解决的基本思路就是改变 router-view 的内部属性 key
可以先参考下 vue 项目是如何改变 router-view 的 key 的:vue刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结
nuxt 项目也有三种解决方案:https://zh.nuxtjs.org/api/components-nuxt
请将链接中的三种方式写到 layouts/default.vue 中,另外说下 watchQuery 的用法,比如:http://localhost:3000?name=wang&number=123 这个例子中,watchQuery: true 是说路由后面的所有查询参数(包括 name 和 number)都被监听了,watchQuery: ['name'] 的意思是只监听了 name 这个查询参数。
如果有查询参数就使用 watchQuery 方案,否则可以使用其他两种方式。当然也可以使用 watch 直接监听路由的变化。