Question

我有一堆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）如果我已经在<b-link href="/foo">上就进行服务器端请求（例如/foo?whatever），要么2）写一个{{1 }}方法用于每个页面。

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

Answer 1

您需要使用watchQuery才能为查询参数启用客户端导航：

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

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

Answer 2

如果你有一个组件，例如

<titlebar :key="somekey" />

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

Nuxt：无需刷新即可销毁并重新创建当前页面的组件

2 个答案: