Nuxt: уничтожить и воссоздать компонент текущей страницы без обновления - PullRequest
Новая
       55

Nuxt: уничтожить и воссоздать компонент текущей страницы без обновления

1 голос
/ 26 сентября 2019

У меня есть несколько компонентов 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) написать метод resetPage() для каждой отдельной страницы.

Можно ли просто указать Nuxt уничтожить и воссоздать текущий компонент страницы?

1 Ответ

0 голосов
/ 26 сентября 2019

Вам необходимо использовать watchQuery, чтобы включить клиент-навигацию для параметров запроса: 

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

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

...