我的 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 关注
- 184 浏览
添加回答
举报
0/150
提交
取消