Nuxt：销毁并重新创建当前页面的组件而不刷新

Posted 2023-02-22

【中文标题】Nuxt：销毁并重新创建当前页面的组件而不刷新

【英文标题】：Nuxt: destroy and recreate current page's component without refresh

【发布时间】：2020-01-26 21:12:29

【问题描述】：

我有一堆 Vue 组件，我使用 Nuxt 作为路由层。我的全局布局非常标准：

<template>
  <nav>
    <nuxt-link to="/foo">foo</nuxt-link> | <nuxt-link to="/bar">bar</nuxt-link> | etc.
  </nav>

  <main>
    <nuxt />
  </main>
</template>

在每个页面中，当 vuex 存储中的数据发生更改时，我会更新查询字符串。如果页面是在服务器端加载的，我会解析查询字符串以将必要的数据预加载到存储中：

<template>
   <h1>foo</h1>
   <!-- forms and stuff -->
</template>

<script>
export default 
  data() 
    return 
      // static data
    
  ,

  computed: 
    fooStoreParams() 
      return this.$store.state.foo.params
    
  ,

  watch: 
    fooStoreParams: async function() 
      await this.$nextTick()

      let query = 

      if (this.fooStoreParams.page > 1) 
        query.page = this.fooStoreParams.page
      

      this.$router.push( path: this.$route.path, query: query )
    
  ,

  async asyncData( store, query ) 
    let params = 

    let data = 
      form: 
        page: 1
      
    

    if (query.page) 
      data.form.page = query.page
      params.page = query.page
    

    store.dispatch('foo/updateParams', params)
    await store.dispatch('foo/getStuffFromAPI')

    return data
  

</script>

这很好用，但我缺少一个功能。

如果我已经在/foo?page=2&a=1&b=2 上，然后单击主导航中的/foo 链接，则没有任何反应。考虑到 Nuxt/vue-router 的工作原理，这是有道理的，但我想要从头开始重新加载页面组件（就像您从 /bar 导航到 /foo 一样）。

我能想到的唯一方法是：1）如果我已经在 /foo?whatever 上，则执行服务器端请求（例如 <b-link href="/foo">）或 2）为每个人编写 resetPage() 方法页面。

有没有办法告诉 Nuxt 销毁并重新创建当前页面组件？

【参考方案1】：

您需要使用 watchQuery 来启用查询参数的客户端导航：

watchQuery: ['page', 'a', 'b']

https://nuxtjs.org/api/pages-watchquery/

【讨论】：

这实际上在我的页面上创建了一个无限循环，因为我在asyncData 中解析查询字符串，这会触发我的watch，从而更新查询字符串等。

【参考方案2】：

如果你有一个组件，例如

<titlebar :key="somekey" />

并且 somekey 的值会改变组件重新渲染。你也许可以解决这个问题来实现你想要的。在这里阅读更多：https://michaelnthiessen.com/force-re-render/