Этот урок посвящен созданию маршрутизации в проекте на Nuxt.js. Мы научимся обрабатывать различные URL-адреса и создавать многостраничный веб-сайт.
Главная страница
На начальном этапе проект обрабатывает только главную страницу, код которой находится в файле app.vue. Этот файл содержит HTML-код, который можно редактировать. Удалим встроенные компоненты и добавим собственный контент:
<h1>Hello world</h1>
<style scoped>
h1 {
color: red;
}
</style>
<script>
export default {
data() {
return {
info: 'Info'
}
}
}
</script>
<p><{{ info }}></p>Этот файл представляет собой стандартный компонент Vue.js, в котором можно прописывать логику, HTML и стили. Запустим проект командой npm run dev (можно добавить флаг -o для автоматического запуска). После запуска сервера откроется главная страница с заданными стилями и HTML-кодом. Встроенный инспектор Nuxt.js позволяет просматривать отслеживаемые страницы, компоненты и другую информацию о проекте.
Создание страниц
Для создания многостраничного сайта необходимо добавить папку pages в корень проекта. Каждый файл в этой папке будет отвечать за определенную страницу. Например, для создания страницы /contact, создадим файл pages/contact.vue:
<h1>Contacts</h1>
<style scoped>
h1 {
color: red;
}
</style>Для главной страницы создадим файл pages/index.vue:
<h1>Homepage</h1>После добавления этих файлов можно удалить app.vue, так как теперь все страницы обрабатываются через папку pages. Обновив страницу, мы увидим, что сайт работает корректно, отображая разные страницы в зависимости от URL-адреса. Весь HTML-код отображается в исходном коде страницы, что улучшает SEO-оптимизацию.
Вложенные и динамические URL-адреса
Для обработки вложенных URL-адресов, например, /users/add, создадим папку pages/users и файл pages/users/add.vue:
<h1>Add User</h1>Для обработки /users создадим pages/users/index.vue:
<h1>All users</h1>Для динамических URL-адресов, например, /users/user-id/123, создадим файл pages/users/[userId].vue:
<template>
<h1>ID of User: <{{ userId }}></h1>
</template>
<script>
export default {
setup() {
const { params } = useRoute();
const userId = params.userId;
return { userId };
}
};
</script>
Здесь используется useRoute() для получения параметра userId из URL-адреса. Мы можем изменять структуру URL-адреса, например, /users/user-id/123, /users/user-123, изменив имя файла соответственно. Nuxt.js корректно обрабатывает такие изменения.
Навигация с помощью NuxtLink
Для удобства навигации используем компонент NuxtLink:
<ul>
<li><NuxtLink to="/">Главная</NuxtLink></li>
<li><NuxtLink to="/contact">Контакты</NuxtLink></li>
<li><NuxtLink to="/users">Пользователи</NuxtLink></li>
</ul>NuxtLink обеспечивает переходы между страницами без полной перезагрузки, что улучшает пользовательский опыт и SEO.
В этом уроке мы рассмотрели основы маршрутизации в Nuxt.js, научились создавать и обрабатывать различные типы URL-адресов, включая вложенные и динамические, а также добавили навигацию с помощью NuxtLink. Это позволяет создавать многостраничные веб-сайты с улучшенной производительностью и SEO-оптимизацией.