Laravel + Vue: Маршрутизація

Перед тим, як перейти до налаштування маршрутизації, перегляньте Laravel + Vue: Базова інтеграція, якщо ви ще цього не зробили.

Припускаючи, що у вас є базове налаштування проекту згідно з інструкціями з попереднього посту про інтеграцію, давайте почнемо з основного кроку.

Git репозиторій

laravel-vue-routing

Встановлення Vue-router

npm install vue-router@4

Після встановлення Vue router, залежності в package.json мають виглядати ось так:

// package.json  
{  
 "private": true,  
 "type": "module",  
 "scripts": {  
 "build": "vite build",  
 "dev": "vite"  
 },  
 "devDependencies": {  
 "autoprefixer": "^10.4.20",  
 "axios": "^1.7.4",  
 "concurrently": "^9.0.1",  
 "laravel-vite-plugin": "^1.0",  
 "postcss": "^8.4.47",  
 "tailwindcss": "^3.4.13",  
 "vite": "^6.0"  
 },  
 "dependencies": {  
 "@vitejs/plugin-vue": "^5.2.1",  
 "vue": "^3.5.13",  
 "vue-router": "^4.5.0"  
 }  
}

web.php

Як ми вже мали наш маршрут за замовчуванням для завантаження додатку, тепер додамо ще один маршрут, який буде викликаний кожного разу, коли буде запитаний невідомий маршрут, тобто для обробки помилки 404. Оновіть файл web.php у папці routes.

where('pathMatch', '.*');

router.js

Створіть файл з ім'ям router.js у resoruces/js. Цей файл буде містити маршрути проекту та налаштування їх відповідних компонентів.

// router.js  
import { createWebHistory, createRouter } from 'vue-router'  

const routes = [  
 {  
 path: '/',  
 name: 'home',  
 component: () => import('./components/pages/Home.vue')  
 },  
 {  
 path: '/about',  
 name: 'about',  
 component: () => import('./components/pages/About.vue')  
 },  
 // маршрут за замовчуванням, якщо жоден інший не буде знайдений  
 {  
 path: '/:pathMatch(.*)*',  
 component: () => import('./components/pages/PageNotFound.vue')  
 }  
];  

const router = createRouter({  
 history: createWebHistory(),  
 routes,  
});  

export default router;

createWebHistory() використовується для увімкнення HTML5 History Mode, який використовує рідний API браузера history.pushState для керування навігацією в односторінковому додатку (SPA). Цей метод дозволяє додатку мати чисті, зручні для користувачів URL без символу хеша (#).

app.js

Тепер нам потрібно використовувати цей роутер у нашому Vue додатку, тому включимо роутер у наш додаток в файл app.js.

import './bootstrap';  
import './bootstrap';  
import { createApp } from "vue";  
import router from './router';  

import App from "./components/App.vue";  

const app = createApp(App);  

app.use(router).mount("#app");

Створення сторінок

• Створіть компонент Header Header.vue у resources/js/components і включіть його в App.vue.

_ тег використовується замість (anchor) тега.
Як показано, це кілька способів вказати URL, на відміну від тега anchor, де URL має бути у значенні атрибута href.

_ тег використовується для відображення компонента для поточного маршруту. Додавання атрибута :key=”$route.fullPath” гарантує, що компонент буде перерендерено кожного разу, коли змінюється маршрут, навіть якщо компонент технічно той самий.

• Створіть Home.vue, About.vue, PageNotFound.vue у resources/js/components/pages

Нижче зображено, як має виглядати структура вашого проекту:

Останній крок

Запустіть наступні команди і отримайте доступ до сторінок через посилання в заголовку роутера.

npm run dev

php artisan serve

Попереднє: Laravel + Vue: Базова інтеграція

Щиро дякую вам за увагу і час, який ви витратили на прочитання цього посту.🕺

Перекладено з: Laravel + Vue: Routing