در این سری مطالب می خواهیم نحوه نوشتن برنامه های تک صفحه ای یا Single Page Application مخفف (SPA) را آموزش دهیم. Vue و لاراول ترکیب خوبی برای ایجاد برنامه های SPA هستند و به شما خواهیم گفت چطور با استفاده از Vue Router و Backend لاراول صفحات تک صفحه ای بسازید.

چرخه معمول کار کردن Vue با لاراول به این صورت است:

• درخواست اول، به روتر لاراول می رسد
• لاراول Layout مربوط به SPA را رندر می کند
• درخواست های بعدی با استفاده از history.pushState بدون لود دوباره کل صفحه ، به آدرس مورد نظر منتقل می شوند.

می توان Vue router را روی مود History یا مود پیش فرض هش تنظیم کرد که از بخش هش URL برای شبیه سازی کل آدرس استفاده می کند بنابراین موقع تغییر آدرس، صفحه از نو ریفرش نمی شود.

ما از مود history استفاده می کنیم پس نیاز داریم در لاراول یک route تعریف کنیم که با تمام url های ممکن برنامه، همخوانی داشته باشد تا هر آدرسی که در SPA آمد را پوشش دهد.برای مثال اگر کاربر صفحه را با /hello ریفرش کرد، ما باید route را مطابقت دهیم و تمپلیت تک صفحه ای Vue را به وسیله لاراول برگردانیم. پس از آن vue router روت را تشخیص می دهد و کامپوننت های مربوطه را لود می کند.

نصب

برای شروع یک نسخه تر و تمیز و نو از لاراول را نصب می کنیم و بعد vue router را بوسیله npm نصب می کنیم:

laravel new vue-router
cd vue-router

# Link the project if you use Valet
valet link

# Install NPM dependencies and add vue-router
yarn install
yarn add vue-router # or npm install vue-router

حالا لاراول و vue router را داریم و می توانیم شروع کنیم.

تنظیم Vue Router

کار vue router این است که یک route را به یک کامپوننت vue تخصیص دهد و آن کامپوننت را جایی که تگ زیر در برنامه هست ، رندر کند:

<router-view></router-view>

router view در کامپوننت اپلیکیشن vue قرار دارد و کل برنامه را در بر می گیرد. بعدا سراغ کاپوننت برنامه بر می گردیم.

اول سراغ فایل اصلی جاوا اسکریپت در  resources/assets/js/app.js می رویم و vue router را تنظیم می کنیم. محتویات فایل فوق را با این کدها جایگزین کنید:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import App from './views/App'
import Hello from './views/Hello'
import Home from './views/Home'

const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/hello',
name: 'hello',
component: Hello,
},
],
});

const app = new Vue({
el: '#app',
components: { App },
router,
});

تعدادی فایل هست که باید ایجاد شان کنیم ولی اول، کمی در مورد محتوای app.js توضیح بدم:

• پلاگین VueRouter را با Vue.use() وارد و نصب کردیم
• ۳ کامپوننت Vue را Import کردیم:
• • • کامپوننت App که اصلی ترین کامپوننت برنامه است
    • یک کامپوننت Hello که با روت /hello همخوانی دارد
    • یک کامپوننت Home که صفحه اصلی هندل می کند
• یک instance از VueRouter ایجاد کردیم که یک شی شامل تنظیمات را دریافت می کند
• بعد Vue را از وجود کامپوننت App با پاس دادن آن به خصیصه components، مطلع کردیم
• ثابت router را به Vue جدید تزریق کردیم تا به this.$router و this.$route دسترسی داشته باشد

سازنده VueRouter آرایه ای از روت ها را گرفته است که مسیر، نام (مثل نام روت در لاراول) و کامپوننتی که به این مسیر مربوط است را شامل می شود.

من دوست دارم تعریف روت را داخل یک روت ماژول مجزا ببرم و بعد import اش کنم، اما به خاطر حفظ سادگی روت ها را داخل فایل اصلی اپلیکیشن قرار دادیم.

حالا به خاطر اینکه mix لاراول با موفقیت اجرا شود، باید ۳ کامپوننت را تعریف کنیم و وجود داشته باشند:

mkdir resources/assets/js/views
 touch resources/assets/js/views/App.vue
 touch resources/assets/js/views/Home.vue
 touch resources/assets/js/views/Hello.vue

اول، فایل App.vue نگهدارنده اصلی برنامه ماست.داخل این کامپوننت، یک تیتر و تعدادی لینک بوسیله <router-link/> تعریف کردیم:

<template>
<div>
<h1>Vue Router Demo App</h1>

<p>
<router-link :to="{ name: 'home' }">Home</router-link> |
<router-link :to="{ name: 'hello' }">Hello World</router-link>
</p>

<div class="container">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {}
</script>

مهم ترین تگ موجود در کامپوننت برنامه، <router-view></router-view> است که در همینجا، کامپوننتی که با route همخوانی دارد، رندر خواهد شد.

کامپوننت بعدی که باید تعریف کنیم در این مسیر است: resources/assets/js/views/Home.vue

<template>
<p>This is the homepage</p>
</template>

در نهایت، کامپوننت Hello را که در resources/assets/js/views/Hello.vue قرار دارد، تعریف می کنیم:

<template>
<p>Hello World!</p>
</template>

دوست دارم همیشه کامپوننت هایی که قابل استفاده مجدد هستند را از کامپوننت هایی که فقط مخصوص view هستند جدا کنم. پس کامپوننت های مخصوص view را در مسیر resources/assets/js/views و کامپوننت های reusable را داخل مسیر resources/assets/js/components قرار می دهیم.

حالا هر چیزی که برای اجرای برنامه Vue خودمان نیاز داریم و مربوط به Front end می شود، را داریم. بعد نیاز داریم روت های Back end و تمپلیت های سمت سرور را تعریف کنیم.

سمت سرور

ما از فریم ورک هایی مثل لاراول برای ساختن برنامه های تک صفحه ای مان استفاده می کنیم زیرا با آنها می توانیم API های سمت سرور ایجاد کنیم.

در این آموزش نمی خواهیم یک API بسازیم ولی دنبالش خواهیم بود. این پست در مورد نوشتن Vue router است.

اولین چیزی که سمت سرور با آن برخورد داریم، تعریف روت است. فایل routes/web.php را باز کنید و کدهای آن را با کد زیر جایزگین کنید:

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/{any}', '[email protected]')->where('any', '.*');

ما یک روت تعریف کردیم که همه آدرس ها را به کنترل SpaController منتقل می کند. اگر این کار را نکنیم و کاربر به مسیر /hello درخواست بدهد با خطای ۴۰۴ روبرو می شود.

بعد، باید کنترلر SpaController را ایجاد کنیم و view را تعریف کنیم:

php artisan make:controller SpaController

کنترلر SpaController را باز کنید و کدهای زیر را داخل آن قرار دهید:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SpaController extends Controller
{
public function index()
{
return view('spa');
}
}

در نهایت کدهای زیر را در resources/views/spa.blade.php قرار دهید:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue SPA Demo</title>
</head>
<body>
<div id="app">
<app></app>
</div>

<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

تگ #app را هم تعریف کردیم که کامپوننت اصلی App را دربر می گیرد و توسط Vue رندر می شود.

اجرای برنامه

برای اجرای برنامه باید جاوااسکریپت را با yarn یا npm اجرا کنیم:

yarn watch # or npm run watch

حال اگر برنامه را در مرورگرتان باز کنید باید چیزی شبیه این ببینید:

در ادامه

ما الان اسکلت برنامه SPA Vue را که در بکند از Laravel API استفاده می کند ، داریم. ولی این برنامه هنوز با چیزی که باید باشد فاصله دارد . در ادامه این بخش ها را اضافه خواهیم کرد:

• تعریف روت در فرونت اند که همه آدرس های ۴۰۴ را هندل کند
• استفاده از پارامترهای route
• روت های فرزند (Child Route)
• فرستادن درخواست از یک کامپوننت Vue به لاراول
• و احتمالا کارهای بیشتری که بعدا خواهیم دید و الان تو ذهنم نیست …

هدف این آموزش این است که به شما نشان دهیم چطور می توانید یک برنامه SPA را با Vue Router بسازید. اگر با آن آشنا نیستید به مستنداتش سری بزنید.