Маршрутизация Nuxt3

Nuxt3 революционизирует маршрутизацию в веб-приложениях. Эта особенность Nuxt3 действительно свидетельствует об их видении: сосредоточьтесь на создании, а не на настройке. Маршрутизация в Nuxt3 выполняется в зависимости от того, как вы структурируете свой проект. Он использует Vue Router под капотом и автоматически настраивает его для вас.

Создание проекта

Для начала нам нужно запустить команды для запуска нового проекта Nuxt.

npx nuxi init nuxt3-routing
cd nuxt3-routing
npm install
code .
npm run dev

И VS Code откроется с начальным шаблоном, и вы увидите страницу приветствия Nuxt3 в своем браузере.

Начало работы с маршрутизацией Nuxt3

Начальный шаблон Nuxt3 предоставляет вам файл app.vue, и обычно вы хотите сохранить его. Но если вы работаете с маршрутизацией, вам нужно удалить этот файл и создать каталог pages/. Обратите внимание, имя каталога должно быть точным. Внутри этого вы должны создать файл index.vue, и это ваша новая страница для вашего домашнего экрана. Теперь ваш каталог должен выглядеть так:

node_modules/
pages/
 |- index.vue
.gitigore
README.md
nuxt.config.ts
package.json
package-lock.json
tsconfig.json

Всякий раз, когда пользователь запрашивает страницу '/', файл vue pages/index.vue должен отображаться на экране.

Добавление маршрутов

Например, вы создаете веб-сайт социальной сети, который имеет 4 раздела,

1. Главная — ваша лента, где вы можете просматривать посты ваших друзей.

2. Ваш профиль — здесь можно просмотреть ваши собственные сообщения.

3. Новый — создайте новый пост, чтобы добавить его в свой профиль.

4. Профиль — просмотреть все посты вашего друга.

Вы хотите, чтобы их маршруты были '/', /profile', '/new' и /profile/{username} соответственно. Вы должны создать каталоги внутри pages/ таким образом, чтобы они соответствовали маршруту, который вы хотите создать.

node_modules/
pages/
 |- new.vue
 |- profile/
 | |- index.vue
 | |- [username].vue
 |- index.vue
.gitigore
README.md
nuxt.config.ts
package.json
package-lock.json
tsconfig.json

Примечание.pages/index.vue относится к '/'. pages/new.vue относится к '/new'. pages/profile/index.vue относится к '/profile'. pages/profile/[username].vue относится к '/profile/{username}'.

Вы можете добавить свой собственный код Nuxt3 в эти файлы и запросить у локального хост-сервера различные маршруты и протестировать функциональность.

Извлечение параметров маршрута

Внутри <script setup /> вы можете использовать что-то, известное как composable, чтобы получить параметры маршрута. Внутри <template /> вы можете использовать $route для доступа к ним. Добавьте следующий код в pages/profile/[username].vue,

<script setup lang="ts">
const route = useRoute() // auto-imports
console.log(route.params.username)
</script>
<template>
  <div>
    This is your friend's - {{ $route.params.username }} - page
  </div>
</template>

Внутренняя маршрутизация

Вместо простого использования простого тега <a href="#"/> рассмотрите возможность использования <NuxtLink to="#" />, так как он напрямую взаимодействует с Vue Router для навигации между страницами.

<template>
  <NuxtLink to="https://cybercoder-naj.github.io">
    Visit my website
  </NuxtLink>
</template>

Определение страницы 404

Создать 404 — Not Found невозможно проще, чем в Nuxt3. Все, что вам нужно сделать, это добавить 404.vue в каталог pages/ и добавить макет страницы, которую вы хотите сохранить.