Как работает система маршрутизации на основе файлов в Nuxt.js?
Nuxt.js — это фреймворк для создания приложений на Vue.js, который упрощает разработку за счет использования согласованной структуры и богатого функционала. Одной из основных концепций Nuxt.js является файл-ориентированная маршрутизация.
Как это работает?
В Nuxt.js маршруты создаются автоматически на основе структуры папок и файлов, которые находятся в директории pages. Каждый файл .vue в этой папке становится маршрутом в вашем приложении.
Вот как это выглядит на практике:
pages:pages/
├── index.vue // соответствует маршруту /
├── about.vue // соответствует маршруту /about
└── user/
├── index.vue // соответствует маршруту /user
└── profile.vue // соответствует маршруту /user/profile
В этом случае, вы получите маршруты:
/— корневая страница приложения/about— страница "О нас"/user— страница пользователя/user/profile— страница профиля пользователя
/user/:id был динамическим, вы можете создать файл pages/user/_id.vue. Где _id — это динамическая сегмент в маршруте:pages/user/
└── _id.vue // соответствует маршруту /user/:id
Внутри этого файла вы можете получить доступ к параметру маршрута через
this.$route.params.id.pages/products/
├── index.vue // соответствует маршруту /products
└── [id].vue // соответствует маршруту /products/:id
В вашем приложении будет две страницы: одна для списка продуктов и другая для индивидуальной страницы продукта.
asyncData и fetch для загрузки данных на серверной стороне и их предварительной отрисовки.Пример такого использования:
<template>
<div>
<h1>{{ product.name }}</h1>
<p>{{ product.description }}</p>
</div>
</template>
<script>
export default {
async asyncData({ params }) {
const productId = params.id;
const response = await fetch(`https://api.example.com/products/${productId}`);
const product = await response.json();
return { product };
}
}
</script>
Итог
Файл-ориентированная маршрутизация в Nuxt.js упрощает создание и управление маршрутами, позволяя вам сосредоточиться на разработке функциональности вашего приложения без необходимости вручную управлять маршрутизацией. Этот подход не только ускоряет разработку, но и делает её более организованной.