我的 web.php 路由文件中有大約 100 條路由，現在我開始使用 vue.js 和 laravel 而不是blade，所以我是否也應該在 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 條路由謝謝
3 回答
ITMISS
TA貢獻1871條經驗 獲得超8個贊
有一個庫：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>
然后您將route在 Javascript 和 Vue 文件中獲得該函數，其工作方式與 Laravel 提供的函數類似。
猛跑小豬
TA貢獻1858條經驗 獲得超8個贊
將所有內容寫入新文件，當您查詢時使用 Promise 以便與 web.php 進行通信，請注意，僅查看視圖。這些路線只有在單個頁面上才有用。這只是一個建議。
藍山帝景
TA貢獻1843條經驗 獲得超7個贊
如果我沒記錯的話，你的問題是找到一種將 Laravel 路由轉換為 Vue 路由的方法，以便你可以輕松地在 Vue 組件上使用它們。
第1步：首先，你必須使用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>
我希望這個答案能幫助你
- 3 回答
- 0 關注
- 233 瀏覽
添加回答
舉報
0/150
提交
取消