Vue: при изменении маршрута отображать страницу только после завершения загрузки. - PullRequest
1 голос
/ 29 марта 2019

Всякий раз, когда я иду по маршруту, по которому я ранее не ходил в текущем сеансе, страница загружается, и стили применяются только через 2 секунды после визуализации страницы.Это приводит к перепрошивке CSS (то есть FOUC), и это совсем нехорошо с точки зрения пользовательского опыта.

Чтобы исправить это, лучший способ, о котором я могу подумать, - это визуализировать страницу только после ее полной загрузки.

Как я могу это сделать?

Кроме того, существуют некоторые другие проблемы CSS, возможно, связанные с приведенным выше:

Вот живой пример проблемы: http://archy -user.name /

Когда вы нажимаете «Поиск по имени» или «Таблица весов», сначала отображается содержимое страницы, а затем применяется CSS.Это не происходит с двумя другими страницами.Я не прикреплял никаких CSS-фреймворков к двум другим, только к «Поиску имени» и «Таблице весов».

Похоже, это проблема, но как я могу это исправить?

Другая проблема заключается в том, что, если на страницах «Поиск имени» или «Таблица весов» вы обновляете страницу, CSS-каркас вообще не загружается, хотя обычный CSS - это.

Корень обеих проблемКажется, это CSS-фреймворки, учитывая, что страницы без них работают нормально.

Кто-нибудь знает, как это исправить или обойти?

Вот как структурированы мои компоненты, "Таблица весов" впример:

<template>
<div class="weightconverter-wrapper">
    <div class="container">
    <div class="row">
        <div class="col-md-6 offset-md-3">
        <h1 class="display-4 text-center mb-3"> Weight Converter </h1>
            <form>
                <div class="form-group">
                    <input type="number" class="form-control form-control-lg" id="filter" placeholder="Input weight..." @input="calculate">
                </div>
            </form>
            <div id="results">
            </div>
        </div>
    </div>
    </div>
</div>
</template>

<script>
export default {
    name: 'Weightconverter',
    methods: {
        calculate
    },
    head: {
        link: [
            {
                rel: 'stylesheet',
                type: 'text/css',
                href: 'css/bootstrap.min.css'
            }
        ]
    },
    created() {
        this.$nextTick(() => {
        this.$nuxt.$loading.start()

        setTimeout(() => this.$nuxt.$loading.finish(), 200)
        })
    }
}

function calculate(e) {
    let value = e.target.value;
    let results = document.getElementById('results');

    let kilograms = Math.round(value / 2.205);
    let grams = Math.round(value * 453.592);
    let ounces = Math.round(value * 16);
    results.innerHTML = `
    <div class="card text-white bg-primary mb-3">
    <div class="card-header">
    Grams:
    </div>
    <div class="card-body">
    <str>`+grams+`</str></div>
    </div>
    <div class="card text-white bg-success mb-3">
    <div class="card-header">
    Kilograms: </div>
     <div class="card-body">
<str>`+kilograms+`</str></div>
    </div>
    <div class="card text-white bg-danger mb-3">
    <div class="card-header">
    Ounces:
    </div>
     <div class="card-body">
<str>`+ounces+`</str></div>
    </div>
    `
}
</script>

<style scoped>

.weightconverter-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: dodgerblue;
    top: 0;
    left: 0;
}

.container {
    position: relative;
    margin-top: 15%;
}

h1 {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.5);
}

</style>

PS - Перезагрузка не работает только на удаленном сервере, на локальном хосте перезагрузка работает нормально.(Хотя есть еще FOUC)

PS2 - проект был построен с "npm run generate"

1 Ответ

0 голосов
/ 29 марта 2019

вы можете добавить условный рендеринг для рендеринга при загрузке ваших данных.https://vuejs.org/v2/guide/conditional.html

...