猿问

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:&nbsp;//github.com/tighten/ziggy但只有当您的 Vue 组件加载到刀片模板内时，它才有效，而当您有一个使用 Laravel API 的完全独立的 Vue 客户端时，它就不起作用。假设第一种情况，只需安装库并将@routes刀片指令添加到主刀片文件中：composer&nbsp;require&nbsp;tightenco/ziggyresources/views/layouts/app.blade.php:<head>&nbsp; <!-- ... -->&nbsp; <!-- CSRF Token -->&nbsp; <meta name="csrf-token" content="{{ csrf_token() }}">&nbsp; <title>{{ config('app.name', 'Laravel') }}</title>&nbsp; <!-- Routes -->&nbsp; @routes&nbsp; <!-- Scripts -->&nbsp; <script src="{{ asset('js/app.js') }}" defer></script>&nbsp; <!-- ... --><head>然后您将route在 Javascript 和 Vue 文件中获得该函数，其工作方式与 Laravel 提供的函数类似。
0

猛跑小猪

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

蓝山帝景

如果我没记错的话，你的问题是找到一种将 Laravel 路由转换为 Vue 路由的方法，以便你可以轻松地在 Vue 组件上使用它们。第1步：首先，你必须使用Laravel路由来配置所有Vue路由 （web.php）Route::get('{any}', function () {&nbsp; return view('layout.app');})->where('any','.*');第 2 步：您的布局刀片文件 (layout/app.blade.php)<head>&nbsp;&nbsp; &nbsp; <meta charset="utf-8">&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">&nbsp; &nbsp; <title>@yield('title', $page_title ?? '')</title>&nbsp; &nbsp; <meta name="csrf-token" content="{{ csrf_token() }}">&nbsp; &nbsp; @yield('styles')</head><body>&nbsp; &nbsp; <div id="app">&nbsp; &nbsp; &nbsp; &nbsp; <main>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @yield('content')&nbsp; &nbsp; &nbsp; &nbsp; </main>&nbsp; &nbsp; </div>&nbsp; &nbsp; @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({&nbsp; &nbsp; el: "#app",router: new VueRouter(router),})第 4 步：创建 Vue 路由文件并导入组件(route/index.js)import Widget from "./js/components/dashboard/Widget.vue"export default{&nbsp;mode: 'history',&nbsp;routes: [&nbsp; &nbsp; { path: '/dashboard/widget', name: "Widget",component: Widget, },&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;]}第 5 步：使用您在第 2 步中创建的布局导航栏组件中的 Vue 路由路径，方法如下：(./js/components/Navbar.vue)<template>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <nav class="navbar navbar-expand-md navbar-light shadow-none">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="container-fluid">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="collapse navbar-collapse" id="navbarSupportedContent">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="navbar-nav ml-auto" id="menubar">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <router-link class="nav-link" to='/dashboard/widget'>Widget</routerlink>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </nav>&nbsp; &nbsp; &nbsp; </template>步骤 6创建小部件组件以展示您的设计。（./js/components/dashboard/Widget.vue）<template>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; widget design goes here...&nbsp; &nbsp; </div></template>我希望这个答案能帮助你
0
随时随地看视频慕课网APP

相关分类

PHP
php如何把参数放在Http Request Heade？？？？ 1 回答
我要回答