В контексте Vue.js термин "загрузчик" (loader) может относиться к нескольким ключевым концепциям. Рассмотрим основные значения.
Наиболее распространенное значение — это загрузчики Webpack для обработки .vue файлов:
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
}
Что делает vue-loader:
<template>, <script> и <style>Загрузчик может означать механизм lazy-loading компонентов:
const AsyncComponent = () => ({
component: import('./MyComponent.vue'),
loading: LoadingComponent, // Показываем при загрузке
error: ErrorComponent, // Показываем при ошибке
delay: 200, // Задержка перед показом loading
timeout: 3000 // Таймаут для ошибки
})
Паттерн для загрузки данных перед отображением компонента:
{
path: '/profile',
component: UserProfile,
beforeEnter: (to, from, next) => {
loadUserData().then(() => next()).catch(next)
}
}
export default {
async beforeRouteEnter(to, from, next) {
try {
await store.dispatch('FETCH_DATA')
next()
} catch (err) {
next('/error')
}
}
}
Создание компонента-лоадера для отображения состояния загрузки:
<template>
<div v-if="loading" class="loader-overlay">
<div class="spinner"></div>
</div>
<div v-else>
<!-- основной контент -->
</div>
</template>
<script>
export default {
data() {
return {
loading: true
}
},
async created() {
try {
await this.loadData()
} finally {
this.loading = false
}
}
}
</script>
Динамическая загрузка маршрутов в Vue Router:
const router = new VueRouter({
routes: [
{
path: '/admin',
component: () => import('./components/AdminPanel.vue'),
meta: { requiresAuth: true }
}
]
})
component: import(/* webpackChunkName: "admin" */ './Admin.vue')