Laravel 路由到 Vue.js 路由答案

【问题标题】：Laravel routes to Vue.js routesLaravel 路由到 Vue.js 路由
【发布时间】：2020-10-17 03:25:20
【问题描述】：

我的 web.php 路由文件中有大约 100 条路由，现在我开始使用带有 laravel 而不是刀片的 vue.js，所以我是否也应该在 vue 路由中编写所有 web.php 路由？最好的方法是什么？

这是我的 web.php laravel 路由：

Route::post('/dashboard/widget', 'AdminDashboardController@widget')->name('dashboard.widget');

    Route::get('clients/export/{status?}/{client?}', ['uses' => 'ManageClientsController@export'])->name('clients.export');
    Route::get('clients/create/{clientID?}', ['uses' => 'ManageClientsController@create'])->name('clients.create');
    Route::post('clients', ['uses' => 'ManageClientsController@store'])->name('clients.store');
    Route::resource('clients', 'ManageClientsController', ['expect' => ['create']]);
    ..... and much more ......

我如何在 vue.js 中表示这个 laravel 路由，因为我的 web.php 中有 100 多个路由

谢谢

【问题讨论】：

您是在 laravel 刀片内部使用 vue 组件，还是为您的项目有单独的前端应用程序？
@livresonltc 我在 app.blade.php 中使用我的 vue 组件
那么您将不得不坚持使用 laravel 路线，因为您使用的是刀片视图。您可以在刀片中包含您的 vue 组件。
@livresonltc 你能详细说明一下吗
这是一个很大的话题，在这里无法详述。您将不得不在 youtube 上观看一些教程。

标签： php laravel vue.js

【解决方案1】：

有一个库：https://github.com/tighten/ziggy

但它只有在你的 Vue 组件加载到刀片模板中时才有效，如果你有一个使用 Laravel API 的完全独立的 Vue 客户端，它就不起作用。假设第一种情况，只需安装库并将@routes刀片指令添加到您的主刀片文件中：

composer require tightenco/ziggy

resources/views/layouts/app.blade.php:

<head>
  <!-- ... -->

  <!-- CSRF Token -->
  <meta name="csrf-token" content="{{ csrf_token() }}">

  <title>{{ config('app.name', 'Laravel') }}</title>

  <!-- Routes -->
  @routes
  <!-- Scripts -->
  <script src="{{ asset('js/app.js') }}" defer></script>

  <!-- ... -->
<head>

然后你将在你的 Javascript 和 Vue 文件中使用 route 函数，它的工作方式类似于 Laravel 提供的函数。

【讨论】：

【解决方案2】：

将所有内容写入一个新文件，当您查询时使用承诺，以便您可以与 web.php 进行通信，注意，只是视图。这些路线只有在单个页面上才有用。这只是一个建议。

【讨论】：

【解决方案3】：

如果我没记错的话，您的问题是找到一种方法将 Laravel 路由转换为 Vue 路由，以便您可以轻松地在您的 Vue 组件上使用它们。

第一步：首先，你必须使用 Laravel 路由来配置所有的 Vue 路由 (web.php)

Route::get('{any}', function () {
  return view('layout.app');
})->where('any','.*');

第 2 步：您的布局刀片文件 (layout/app.blade.php)

<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>@yield('title', $page_title ?? '')</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @yield('styles')
</head>
<body>
    <div id="app">
        <main>
            @yield('content')
        </main>
    </div>
    @yield('scripts')
</body>
<script src="{{asset('./js/app.js')}}"></script>

第 3 步：您的 Vue 应用文件 (./js/app.js)

require('./bootstrap');
window.Vue = require('vue')
import VueRouter from 'vue-router'
import router from './router'
Vue.use(VueRouter);
Vue.use(middleware, router)
const app = new Vue({
    el: "#app",
router: new VueRouter(router),

})

第四步：创建你的Vue路由文件并导入你的组件(route/index.js)

import Widget from "./js/components/dashboard/Widget.vue"
export default{
 mode: 'history',
 routes: [
    { path: '/dashboard/widget', name: "Widget",component: Widget, },       
 ]
}

第 5 步： 使用您在 第 2 步中创建的布局导航栏组件中的那些 Vue 路由路径，(./js/components/ Navbar.vue)

<template>
            <nav class="navbar navbar-expand-md navbar-light shadow-none">
                <div class="container-fluid">
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto" id="menubar">
                            <li class="nav-item">
                                <router-link class="nav-link" to='/dashboard/widget'>Widget</routerlink>
                            </li>
                        </ul>
                    </div>
                </div>  
            </nav>
      </template>

第 6 步创建小部件组件以展示您的设计。(./js/components/dashboard/Widget.vue)

<template>
    <div>
        widget design goes here...
    </div>
</template>

希望这个答案对你有所帮助

【讨论】：