nuxt 客户端路由跳转时同一组件重新挂载导致mounted 生命周期重复执行问题解决

以下测试版本为nuxt2.17.1

这是因为 nuxt默认设置了vue-router中的key而且设置的是route.fullPath，导致切换router后，会在客户端重新执行asyncData/fetch并重新挂载组件(执行created mounted生命周期)。

若设置相同key让其保活后，不会重新挂载，但会重新从服务器端执行asyncData/fetch进行ssr渲染，然后再在客户端执行生命周期钩子(即会刷新浏览器)。

在nuxt中有三种方式可以处理 内部属性的 key：

1.nuxt的 nuxtChildKey

 

ps:需用在layout中。

可通过添加 layouts/default.vue 文件来扩展应用的默认布局.默认布局的源码如下：

2.页面组件中的key选项：string 或 function

export default {

  key(route) {

    return route.fullPath

  }

}

3.页面组件中的watchQuery选项：boolean 或 string []

watchQuery选项中指定的查询会被用于构建key。如果watchQuery为true，则默认使用fullPath

export default {

  watchQuery: ['page']

}