nuxt页面跳转_nuxt 项目如何解决组件复用时页面不刷新的问题

组件复用会在两种情况下发生：

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种解决方案总结

请将链接中的三种方式写到 layouts/default.vue 中，另外说下 watchQuery 的用法，比如：http://localhost:3000?name=wang&number=123 这个例子中，watchQuery: true 是说路由后面的所有查询参数(包括 name 和 number)都被监听了，watchQuery: ['name'] 的意思是只监听了 name 这个查询参数。

如果有查询参数就使用 watchQuery 方案，否则可以使用其他两种方式。当然也可以使用 watch 直接监听路由的变化。