Es ist am einfachsten, den Inhalt über das Stammverzeichnis index zu laden, wenn die Seite zum ersten Mal geöffnet wird. html-Datei index.html文件
在 <div id='app'> 里添加内容，就是过度内容
<body>
<div id="app">
<h2>加载中......</h2>
</div>
<script type="module" src="/src/main.js"></script>
</body>当vue实例创建完成，通过.mount() 方法挂载到 id='app' 的div 里，会替换掉里的loading内容；
路由切换过度 需要先了解一个，vue3 的内置组件 <Suspense>；
<Suspense> 提供 2 个插槽 ????；
#default : 一个要加载的内容 ；
#fallback: 一个加载种显示的内容；
<Suspense> <template #default> <router-view /> </template> <template #fallback> <h2>加载中......</h2> </template> </Suspense>
同理：( 异步组件的切换 )
<template>
<Suspense>
<template #default>
<AsyncComp v-if = 'vitblie' />
</template>
<template #fallback>
<h2>加载中......</h2>
</template>
</Suspense>
<button @click='open'> 切换 </button>
</template>
<script setup>
import { defineAsyncComponent , ref } from 'vue';
const asyncComp = defineAsyncComponent(()=>important('./asyncComp.vue));
const vitblie = ref(false);
function open(){
vitblie.value = !vitblie.value;
}
</script>异步组件也是可以使用相同的方法
添加过度动画需要先了解 vue3 内置组件 <Component> 和 <Transition> ????
<Component>: 非常简单只有一个 is 显示该组件， 可以用来组件切换 如：
<template> <Component :is="visible ? TestComp : '' " /> </template>
<Transition> : 里插入的内容 显示/隐藏 添加过度动画 ，通过 name 属性来拼接 class 如 :
<template> <transition name='anime'> <TestComp v-if='visblte' /> </transition> </template>
设置样式通过 name 属性 这里
anime-enter-active: 过度态 ( 设置 隐藏 => 显示 过度的时间等参数)anime-leave-active: 过度态 ( 设置 显示 => 隐藏 过度的时间等参数)anime-enter-from=>anime-enter-to隐藏 => 显示 开始和结束的样式anime-leave-from=>anime-leave-toin<template> <router-view v-slot={ Component } > <transition name='anime'> <component :is="Component" /> <transition> </router-view> <template> <style scoped> .anime-enter-active, .anime-leave-active { transition: all 1s; } .anime-leave-from { transform: translateY(0); } .anime-leave-to { transform: translateY(-100%); } .anime-enter-from { transform: translateY(100%); } .anime-enter-to { transform: translate(0); } </style>Nach dem Login kopierenloading-Inhalt ersetzt2 Beim Umschalten des Routings Laden von Komponenten
- 🎜Um übermäßig zu wechseln, müssen Sie zunächst eines verstehen: Die integrierte Komponente von
vue3< Suspense>; 🎜- 🎜
<Suspense>bietet2Slots????; 🎜#default: ein zu ladender Inhalt; 🎜- 🎜
🎜rrreee 🎜🎜Ähnlich: (Umschalten asynchroner Komponenten)🎜🎜rrreee🎜Asynchrone Komponenten Sie können auch die gleiche Methode verwenden🎜🎜Übergangsanimation hinzufügen🎜🎜Um eine Übergangsanimation hinzuzufügen, müssen Sie zunächst den Aufbau von#fallback: Von einer Ladeart angezeigter Inhalt 🎜vue3verstehen. in den Komponenten<Component>und<Transition> code> ????🎜🎜<Component>: Sehr einfach, nur einiszeigt die Komponente an, die zum Wechseln von Komponenten verwendet werden kann, wie zum Beispiel: 🎜rrreee🎜< ;Übergang>: Der in 🎜Anzeigen/Ausblenden🎜 eingefügte Inhalt. Übergangsanimation hinzufügen und verbindenclassdurch das AttributnameZum Beispiel: 🎜rrreee🎜Legen Sie hier den Stil durch das Attributnamefest 🎜🎜anime- enter-active: Übergangszustand (Set 🎜hide=> Anzeige 🎜 Übergangszeit und andere Parameter)anime-leave-active: Übergangszustand (Set 🎜display=> ; hide🎜 Übergangszeit und andere Parameter)anime-enter-from=> ;anime-enter-to🎜Hide=> 🎜 Start- und Endstileanime-leave-from=>anime-leave -to🎜Show => Ausblenden 🎜 Start- und Endstile 🎜🎜🎜 kombiniert ????🎜rrreeeDas obige ist der detaillierte Inhalt vonWie vue3 das Problem der übermäßigen Belastung in jeder Szene löst. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
