Можно ли использовать основные методы laravel из компонента Vue.js?

Question

Я относительно доволен Laravel 5, но довольно зеленый, когда дело доходит до Vue.js, и я бродил, можно ли вызвать методы Laravel, которые доступны из blade-компонента в компоненте Vue.js.

Например, я хочу сделать компонент Vue.js для моей панели навигации следующим образом:

<template>
    <nav class="navbar navbar-expand-sm navbar-dark bg-info mb-2">
        <div class="container">
            <a href="{{ route('home') }}" class="navbar-brand">Go Home</a>
        </div>
    </nav>
</template>

<script>
    export default {
        name: "NavBar"
    }
</script>

home - это именованный маршрут в моем wep.php файле

Route::get('/', 'SiteController@index')
    ->name('home');

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

Vue.component('navbar', require('./components/NavBar'));

в моем app.js файле

Как я могу сделать что-то подобное? В этом примере я использую только метод route() для вставки тега src, но мне также интересно сделать что-то аналогичное этому из компонента Vue.js

@if (Route::has('login'))
    <div class="top-right links">
        @auth
           <a href="{{ url('/home') }}">Home</a>
        @else
           <a href="{{ route('login') }}">Login</a>
           <a href="{{ route('register') }}">Register</a>
        @endauth
    </div>
@endif

Это то, как я могу сделать это из моего *.blade.php файла, но как я могу сделать этот тип логики, используя компоненты Vue? Кстати, я использую Laravel 5.7.

Answer 1

Я создавал приложения Vue с Laravel без каких-либо шаблонов блейдов, кроме индекса, чтобы представить базовые метаданные HTML, необходимые для работы SPA.

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

Чтобы начать работу и заполнить Vue всеми доступными веб-маршрутами, добавьте следующее в route / web.php

Route::get('/js/routes.js', function() {

    // White list namespaces that can be exposed to Vue.
    $allow = ['App\Http\Controllers'];

    // uncomment below to enable cache
    // $routes = \Illuminate\Support\Facades\Cache::rememberForever('routes.js', function () {

        $routes = [];

        foreach(Route::getRoutes()->getIterator() AS $route)
        {
            if(!array_key_exists('namespace',$route->action))
                continue;

            if(!is_array($route->action['middleware']))
                continue;

            if(in_array($route->action['namespace'],$allow,true))
                continue;

            $name = $route->getName();

            if(empty($name))
                continue;

            $routes[$name] = $route->uri;
        };

        return $routes;


    // });

    header('Content-Type: text/javascript');
    echo 'let routes = ' . json_encode($routes) . ';';
    echo 'window.route = function() { let args = Array.prototype.slice.call(arguments); let name = args.shift();if(routes[name] === undefined) { console.error(\'Unknown route \', name); } else { return \'/\' + routes[name].split(\'/\').map(s => s[0] == \'{\' ? args.shift() : s).join(\'/\');}};';
    exit();

})->name('assets.routes');

Добавить в файл макета лезвия:

<link rel="preload" href="/js/routes.js" as="script">

Чтобы затем сделать эти маршруты доступными в компонентах Vue, к которым можно привязаться Vue, используя следующий пример после импорта Vue из 'Vue' :

Vue.prototype.$getRoute = window.route;
Vue['getRoute'] = window.route;

Затем вы можете в методах Vue использовать this.getRoute('laravels.route.name', [ id: user.id ]), это работает во многом как функция route в Laravel с переменными url, передаваемыми в качестве второго параметра. В компоненте связи маршрутизатора или событии щелчка это будет работать так:

<router-link :to="$getRoute('logout')">Logout</router-link>

<button @click="$getRoute('logout')">Logout</button>

Значение, переданное в getRoute - это имя маршрута в Laravel, когда вы используете Route::get(...)->name('my.custom.route.name') в web.php

Используйте команду php artisan route:list, чтобы получить список всех имен маршрутов созданных вами ресурсов, которые вы можете использовать для $ getRoute () в Vue.

---

В дополнение к дополнительному бонусу вы можете вернуть пользовательские данные JSON для вновь аутентифицированного пользователя, отредактировав Auth / LoginController.php и добавив следующий метод:

 public function authenticated(Request $request, $user)
 {
    return response()->json([
        'redirect' => session()->pull('url.intended')
    ]);
 }

Вы можете расширить это и вернуть много дополнительных учетных данных. Для начала я передаю заданный путь перенаправления, который на самом деле принадлежит маршрутизатору Vue. Приложение Vue уже подтолкнуло пользователя к экрану входа в систему, но у Laravel в сеансе также есть моментальный снимок того, куда пользователь шел до этого. $ Router.push ('login') произошел.

Vue.prototype.$Laravel = window.Laravel;
Vue['Laravel'] = window.Laravel;

logMeIn() {

    this.$root.isAuthenticating = true;

    axios.post(this.$getRoute('login.send'),this.input).then(response => {

        this.Laravel.myArray = response.data.myArray;

        this.$router.push(response.data.redirect);

    }).catch(error => {

        this.$root.isAuthenticating = false;
        ErrorHandler(this,error);

    });

},