Laravel 路由到 Vue.js 路由
我的 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 条路由
谢谢
万千封印浏览 190回答 3
3回答
-
ITMISS
有一个库：https: //github.com/tighten/ziggy但只有当您的 Vue 组件加载到刀片模板内时，它才有效，而当您有一个使用 Laravel API 的完全独立的 Vue 客户端时，它就不起作用。假设第一种情况，只需安装库并将@routes刀片指令添加到主刀片文件中：composer require tightenco/ziggyresources/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 提供的函数类似。 -
猛跑小猪
将所有内容写入新文件，当您查询时使用 Promise 以便与 web.php 进行通信，请注意，仅查看视图。这些路线只有在单个页面上才有用。这只是一个建议。 -
蓝山帝景
如果我没记错的话，你的问题是找到一种将 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>我希望这个答案能帮助你
随时随地看视频慕课网APP
PHP