Основа

Мы будем разрабатывать наше одностраниченое приложение на Vue.js 2 внутри того же самого проекта Laravel. По-умолчанию в файле routes/web.php объявлен один маршрут, который возвращает view welcome.blade.php - это все, что нам надо со стороны Laravel в этой части. Отредактируйте view следующим образом:

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>SPA tutorial by Voerro</title>
    </head>
    <body>
        <div id="app">
            <vue-layout></vue-layout>
        </div>

        <script src="/js/app.js"></script>
    </body>
</html>

Довольно простой шаблон, не так ли? Он содержит только базовую разметку HTML страницы, в которую мы включаем Vue.js компонент vue-layout, который будет отвечать за динамическую генерацию содержимого страницы. Теперь выполните следующие команды:

npm install
npm run dev

Запустите сервер разработки php artisan serve, зайдите на http://localhost:8000 и вы должны увидеть пустую страницу. В консоли браузера должна быть ошибка от Vue, т.к. мы еще не создали компонент vue-layout. Это будет нашим следующим шагом. Создайте новый файл resources/assets/js/views/Layout.vue:

<template>
    <div>Hello World</div>
</template>

<script>
export default {

}
</script>

Зарегистрируйте компонент в файле resources/assets/js/app.js так, как вы это делает обычно с компонентами Vue в Laravel:

Vue.component('vue-layout', require('./views/Layout.vue'));

Пере-компилируйте файлы выполнив либо npm run dev, либо npm run watch (в данном случае файлы будет пере-компилироваться автоматически каждый раз, когда вы изменяете и сохраняете один из файлов). Обновите страницу браузера и вы должны увидеть "Hello World" в самом верху - это означает, что компонент был успешно привязан к странице.

Далее нам нужно установить vue-router - этот пакет будет нашим frontend маршрутизатором, отвечающим за навигацию между страницами сайта. Выполните команду:

npm install vue-router --save-dev

Затем давайте создадим отдельный файл для хранения маршрутов resources/assets/js/routes.js. Мы создадим пару общедоступных страниц, страницу входа и страницу, доступную только авторизированным пользователям. Обратите внимание как каждому пути соответствует компонент Vue.

import VueRouter from 'vue-router';

let routes = [
    {
        path: '/',
        component: require('./views/Home.vue')
    },
    {
        path: '/about',
        component: require('./views/About.vue')
    },
    {
        path: '/login',
        component: require('./views/Login.vue')
    },
    {
        path: '/dashboard',
        component: require('./views/Dashboard.vue')
    }
];

export default new VueRouter({
    routes
});

Вернитесь в файл resources/assets/js/app.js и импортируйте routes.js вверху:

import router from './routes.js';

Затем добавьте объект с маршрутами в ваш объект Vue:

const app = new Vue({
    el: '#app',

    router
});

Нам также надо сказать Vue, чтобы он использовал vue-router. Импортируйте модуль вверху файла:

import VueRouter from 'vue-router';

Затем, сразу после импортирования Vue добавьте следующее:

window.Vue = require('vue'); // импортируем Vue

Vue.use(VueRouter);

Если вы сейчас обновите страницу, вы по-прежнему будете видеть текст "Hello World". Давайте отредактируем шаблон компонента Layout.vue следующим образом:

<template>
    <div>
        <div>
            <router-link to="/">Home</router-link>
            <router-link to="/about">About</router-link>
            <router-link to="/dashboard">Dashboard</router-link>
        </div>

        <div>
            <router-link to="/login">Login</router-link>
        </div>

        <div style="margin-top: 2rem">
            <router-view></router-view>
        </div>
    </div>
</template>

Компоненты router-link и router-view являются частью пакета vue-router. Мы добавили на страницу ссылку на каждый из маршрутов, а также компонент router-view, на месте которого будет генерироваться дочерние Vue компоненты в зависимости от выбранного маршрута. Теперь, если вы заметили, каждый из маршрутов в файле routes.js указывает на Vue компонент, однако эти компоненты мы еще не создали. Создайте 4 компонента в соответствие с routes.js. Эти компоненты не нужно регистрировать так, как мы это делали с Layout.vue. Поместите уже знакомый вам базовый код в каждый из них:

<template>
    <div>Hello World</div>
</template>

<script>
export default {

}
</script>

Советую заменить текст "Hello World" на название каждой страницы, чтобы можно было протестировать навигацию. После этого можете обновить страницу и вы должны увидеть содержимое шаблона компонента Home.vue. Понажимайте на ссылки и вы увидите, как текст страницы и URL в браузере меняются без перезагрузки страницы.

Кстати, вы заметили, как все маршруты в строке адреса браузера начинаются с #/? # говорит браузеру о том, что все, что следует после него - это просто якорь, указывающий на фрагмент на открытой на данный момент странице, поэтому перезагрузка страницы не происходит.

В следующей части урока мы поговорим об аутентификации на стороне клиента.