英文:
How to render a default view in Vue.js 3
问题
我想在Vue.js加载时渲染一个默认的视图/路由。
目前，当页面加载时，页眉和页脚会显示出来，并且在主页渲染之前会有一个小的延迟。这导致页脚触碰到页眉。
有没有办法在应用程序加载时渲染一个默认路由，这样页脚就不会在视图加载时“跳动”到页面的末尾？
App.vue
<main class="wrapper" id="app">
<Header />
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<div :key="$route.path">
<component :is="Component" />
</div>
</transition>
</router-view>
<footer>
</footer>
</main>
英文:
I would like to render a default view/route when Vue.js loads.
At the moment, when the page loads, the header and the footer are shown and there is a small delay before the homepage is rendered. This causes the footer to touch the header.
Is there a way to render a default route on app load so that the footer doesn't "jump" to the end of the page as the view loads ?
App.vue
<main class="wrapper" id="app">
<Header />
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<div :key="$route.path">
<component :is="Component" />
</div>
</transition>
</router-view>
<footer>
</footer>
</main>
答案1
得分: 1
你可能正在寻找SSR技术或SSG。这两种方法都会改变SPA的行为，所以请考虑一下是否值得付出这样的努力。另一种方法是使用PWA的启动画面，这样在内容准备好之前可以隐藏所有内容。
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论