vue -router pu sh не скрывать первую страницу, когда массив данных большой - PullRequest
Новая
       5

vue -router pu sh не скрывать первую страницу, когда массив данных большой

0 голосов
/ 06 февраля 2020

Когда я использую this.$router.push("/history/" + fileid); из моего Home.vue до go в History.vue, я делаю запрос created или mounted a socket.io, который содержит много данных и рендеринг с v-for занимает не менее 2/3 se c.

Home.vue не исчезает, пока 2/3 se c, а затем мы видим, что History.vue появляется под пришло время получения данных.

Есть ли способ заставить Home.vue исчезнуть напрямую?

Редактировать : Ajax был заменен на socket.io во время процесс.

Edit2: На самом деле «много данных» - это всего 300 элементов, запрос действительно мгновенный.

Моя созданная функция: 

created: function() {
    console.log("------------ HISTORY -----------");
    let state = this.$store.state;
    if (state.socket.io._callbacks["$history"] != undefined) {
        state.socket.io.off("history");
    }
    console.log("Binding history");
    state.socket.io.on("history", data => {
        if (data.success) { //if everything is alright
            //For each item in the data.history I will stock them in a total_history array
            data.history.map(h => {
                h.internalid = internalid++; //key for v-for
                h.histtype = 0;              //history    
                this.total_history.push(h);  //add it to the total array
            });
            //For each item in the data.lock_history I will stock them in the total_history array
            data.lock_history.map(h => {
                h.internalid = internalid++;  //key for v-for
                h.histtype = 1;               //lock
                this.total_history.push(h);   //add it to the total array
            });
            //foreach item (300) I convert the datetime string to a Datetime Object
            this.total_history.map(t => {
                t.datetime = new Date(t.datetime);
            });
        }
    });

    //Send a request to get the function above exec on response from server
    let fileid = this.$route.params.fileid;
    fileid = parseInt(fileid); //get url param
    if (typeof fileid == "number") {
        console.log("get history: " + fileid);
        state.socket.io.emit("history", { //send the request to get history
            user: state.user.name,
            token: state.user.token,
            document_id: fileid
        });
    }
}

Ответы [ 2 ]

0 голосов
/ 07 февраля 2020

Я исправил это, добавив скрывающийся класс во время отпускного активного события перехода vue к моему App.vue

Это выглядит так: 

<template>
  <div id="app">
    <transition
    leave-active-class="hide-router"
    >
      <router-view/>
    </transition>
  </div>
</template>

<style scoped>
.hide-router
{
  display: none;
}
</style>

Но это вероятно, довольно плохое решение. Если есть кто-то с другой идеей?

0 голосов
/ 06 февраля 2020

Брат, это заняло время, потому что ты добавил код после успешного получения ответа. если вы хотите перенаправить на страницу истории, вы можете использовать Навигационную защиту и справиться с ней с помощью функций навигации. пожалуйста, посетите vuejs документацию.

...