Задержка на маршрутах с тем же компонентом - PullRequest
Новая
       22

Задержка на маршрутах с тем же компонентом

0 голосов
/ 08 июля 2019

Я использую vue router для маршрутизации с переходами и vuex для получения и хранения контента из JSON API, который все работает.

Единственная проблема возникает на маршрутах, использующих один и тот же компонент.На секунду старое состояние компонента отображается после изменения маршрута и обновляется через 2 секунды с новым содержимым.Я думаю, потому что он ждет axios и обновляет его, как только состояние становится доступным и может быть отображено.Я попытался добавить v-if с анимацией загрузки, но, поскольку старое состояние все еще отображается, оно не работает.Какой способ справиться с этим?

Интересно, не связано ли это с другой проблемой - переходы не работают ни на маршрутах с одним и тем же компонентом, хотя я использую идентификатор <router-view :key="$route.params.id" /> Любая помощь раньше!

Маршрутизатор 

<transition name="fade" mode="out-in" appear>
   <router-view :key="$route.params.id" />
</transition>

Компонент 

export default {
    name: 'SinglePage',
    data() {
      return {
        page_slug: this.$route.params.page
      }
    },
    computed:{ 
      ...mapState({
        homepage_slug: state => state.settings.homepage,
        title: state => state.page.title,
        content: state => state.page.content,
        f_image: state => state.page.image
      })
    },
    watch: {
      '$route': function () { 
        this.page_slug = this.$route.params.page
        this.loadContent()
      }
    },
    methods: {
      loadContent: function(){
        if(this.$route.name == 'homepage'){
          this.$store.dispatch('LOAD_PAGE', { slug: this.homepage_slug })
        }
        else{
          const page_slug = this.$route.params.page
          this.$store.dispatch('LOAD_PAGE', { slug: page_slug })
        }
      }
    },
    mounted() {
      this.loadContent()
    }
}

Vuex / Axios 

import axios from 'axios'

export default {
  state: {
    title: '',
    content: '',
    image: ''
  },
  actions: {
    LOAD_PAGE: function({ commit }, slug) {    
      axios
        .get('http://myjsonapi/pages?slug=' + slug.slug )
        .then(response => response.data)
        .then(page => {
          commit('SET_PAGE', page)
        })
      }
    },
    mutations: {
      SET_PAGE(state, page) {
        state.title = page[0].title.rendered,
        state.content = page[0].content.rendered,
        state.image = page[0].featured_img_url
      }
    },
    getters: {
    }
  }

1 Ответ

0 голосов
/ 08 июля 2019

Попробуйте использовать V-Cloak в своем приложении: 

 <router-view :key="$route.params.id" v-cloak/>

CSS: 

[v-cloak] {
  display: none;
}
...