Vue：在路线更改时，仅在完成加载后才呈现页面

Posted 2023-02-22

【中文标题】Vue：在路线更改时，仅在完成加载后才呈现页面

【英文标题】：Vue: On route change, render page only when finished loading

【发布时间】：2019-08-19 22:49:50

【问题描述】：

每当我在当前会话中转到我以前没有去过的路线时，页面加载和样式仅在页面呈现后约 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”构建的

【问题讨论】：

如果在nuxt.config.js中加载css会怎样？

如果我在那里加载它，框架会在每个页面中加载，这不是必需的，所以这将是最后的手段......我是 Vue 新手，所以我不确定关于这一点，但是当前页面的 CSS 仅在请求时才加载，对吗？还是在您请求主页时加载它，而不管主页中使用的文件是什么？ IE。 - 如果在根 index.html 中我没有链接特定文件，而是将其链接到另一个页面，客户端是否会下载该文件？

【参考方案1】：

您可以添加条件渲染以在加载数据时进行渲染。 https://vuejs.org/v2/guide/conditional.html

【讨论】：

有没有页面加载的方法？比如“this.loaded”？

@Slins 有一个 beforeMount() 和mounted() 事件，这里是生命周期文章link希望对你有帮助:)