Laravel VueJs SPA：VueJS 路由路由是否应该与 Laravel 路由匹配答案

【问题标题】：Laravel VueJs SPA : should VueJS router routes match with Laravel routesLaravel VueJs SPA：VueJS 路由路由是否应该与 Laravel 路由匹配
【发布时间】：2020-04-05 21:57:00
【问题描述】：

这个问题很简单。

为了使用 Laravel 和 VueJS 构建简单页面应用程序 (SPA)，router.js 中存在的所有路径（定义 SPA 路径的文件）是否也存在于 Laravel 的web.php 中？

例如我使用来自here的源代码：

router.js 里面的resources/assets/js/frontend 有：

export default [

    { path: '/create', component: SubmitTicketFormComponent },
    { path: '/view/:ticketId', name: 'client-view-ticket', component: ViewTicketComponent, props: true }
];

但是routes文件夹里面的web.php有

Route::get('/', function () {
    return view('welcome');
});
Route::get('/admin', function () {
    return view('admin');
});
Route::post('/login', 'Auth\LoginController@login');
Route::post('/logout', 'Auth\LoginController@logout')->name('logout');
//Auth::routes();
Route::get('/home', 'HomeController@index')->name('home');

api.php 里面的routes 文件夹有：

Route::middleware('auth:api')->group(function() {
    Route::get('/profile', 'ProfileController@index');
    Route::apiResource('/admin/tickets', 'Admin\TicketsController');
});
Route::apiResource('tickets', 'TicketsController');

那么关于 VueJs 和 Laravel 的路径或路由声明的规则是什么？

【问题讨论】：

看看我的 laravel 水疗套餐，laravue-spa.wheelmaker.dev 它还没有准备好迎接黄金时段，但你可能会从中受益匪浅。
@wheelmaker，我试图从这里调整Chapter07 目录下的代码：github.com/PacktPublishing/Full-Stack-Vue.js-2-and-Laravel-5。但是 URL listing/5 在App.vue 中的router-view 的位置没有显示任何渲染内容。 router.js 和 web.php 路径和路由都在那里匹配。您能否将回购作为标准，以明确是什么原因导致不呈现上述部分，即：是否是任何与路径相关的问题或其他问题？

标签： laravel vue.js vue-router

【解决方案1】：

如果你想拥有一个 SPA 并保留一些 Laravel 页面，你需要一个这样的路由：

Route::get('/{any}', 'VueController@index')->where('any', '.*');

这可以在你的路由文件的末尾，所以如果它与现有的 Laravel 路由不匹配，它将打开 Vue SPA 并从那里处理路由。

【讨论】：

关于 VueJs 和 Laravel 的路径或路由声明的规则是什么？它们应该匹配吗？哪些路径应该在 router.js 中，哪些路径应该在 web.php 中？
@IstiaqueAhmed，不，它们不需要匹配。将您的 Lravel 路由保存在 web.php 中，将您的 SPA 路由保存在 router.js 中。
所以我什至可以在 web.php 内声明没有路由？
' 它将打开 Vue SPA 并从那里处理路由。 ' - 你能详细说明一下吗？ ViewJS 路径如何与控制器交互？
VueJS SPA 路径不需要与控制器交互来显示页面。那么当所有 SPA 路径都有一个入口点，即 App.vue 时，控制器方法如何将数据发送到 .vue 文件？