是否可以从 Vue.js 组件中使用 laravel 的核心方法？

Question

我对 Laravel 5 比较满意，但对于 Vue.js 来说却是相当绿色，我正在徘徊是否可以调用 Laravel 的方法，这些方法可从 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

我一直在使用 Laravel 构建 Vue 应用程序，除了索引之外没有任何刀片模板来呈现 SPA 运行所需的基本 HTML 元数据。

除此之外，我的应用程序通常需要一个经过身份验证的用户，等等用户经过身份验证的登录请求我返回用户成功响应所有与该用户相关的设置和权限。

要开始使用所有可用的网络路由填充 Vue，请将以下内容添加到 routes/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 在 import Vue from 'Vue' 之后使用以下示例：

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

然后你可以在 Vue 方法中使用this.getRoute('laravels.route.name', [ id: user.id ])，这很像 Laravel 中的 route 函数，将 url 变量作为第二个参数传递。在路由器链接组件或点击事件中，它会像这样工作：

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

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

getRoute中传入的值是你在web.php中使用Route::get(...)->name('my.custom.route.name')时在Laravel中的路由名称

使用命令php artisan route:list 列出您创建的资源的所有路由名称，您可以在 Vue 中用于 $getRoute()。

---

作为额外的好处，您可以通过编辑 Auth/LoginController.php 并添加以下方法为新通过身份验证的用户返回自定义 JSON 数据：

 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);

    });

},