Laravel 路由到 Vue.js 路由

Question

I have about 100 routes in my web.php route file, and right now i started using vue.js with laravel instead of blade, so should i write all my web.php routes in vue routes also? 什么是最好的方法？

這是我的 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.ZE134BFD762362E0AA7AFZ 中有超過 100 條路線

謝謝

Answer 1

有一個庫： https://github.com/tighten/ziggy

但它僅在您的 Vue 組件加載到刀片模板中時才有效，如果您有一個使用 Laravel API 的完全獨立的 Vue 客戶端，則它不起作用。 假設第一種情況，只需安裝庫並將@routes Blade 指令添加到您的主刀片文件中：

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 function ，其工作方式類似於 Laravel 提供的路線。

Answer 2

將所有內容寫入一個新文件，當您查詢使用承諾時，您可以與 web.php 進行通信，注意，只是視圖。 這些路線只有在單個頁面上才有用。 這只是一個建議。

Answer 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),

})

第 4 步：創建 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>

我希望這個答案對你有幫助

Laravel 路由到 Vue.js 路由

問題描述

3 個解決方案

解決方案1
3 2021-02-02 15:22:41

解決方案2
0 2020-08-31 05:58:06

解決方案3
0 2021-07-12 21:34:55

Laravel 路由到 Vue.js 路由

問題描述

3 個解決方案

解決方案1 3 2021-02-02 15:22:41

解決方案2 0 2020-08-31 05:58:06

解決方案3 0 2021-07-12 21:34:55

解決方案1
3 2021-02-02 15:22:41

解決方案2
0 2020-08-31 05:58:06

解決方案3
0 2021-07-12 21:34:55