laravel - Vuejs 路由与 Laravel 路由冲突，试图发出 axios 请求答案

【问题标题】：laravel - Vuejs routes conflicting with Laravel routes, trying to make an axios requestlaravel - Vuejs 路由与 Laravel 路由冲突，试图发出 axios 请求
【发布时间】：2019-04-19 09:04:31
【问题描述】：

我正在尝试发出获取请求。

我的项目设置为 SPA，因此 VueJS 正在处理我的每个“页面”的路由。

我想我已经缩小了 VueJS 路由干扰 Laravel 路由的范围，因为无论我访问 /someEndPoint 的哪个无效端点，在开发工具下我总是收到与下面相同的 html 响应。而且我还可以发出一个post请求，数据可以输入我的数据库，这很好。但是无论我尝试什么获取请求，它都不会进入指定控制器的功能

这是我正在尝试提出的标准获取请求

axios.get('/reservation/date/2018-11-13/')
  .then(function(response) {
    console.log("data", response.data);
    console.log("status", response.status);
  }).catch(function (error) {
    console.log(error);
  });

状态码为 200 的响应

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Home Page</title>
    <meta name="csrf-token" content="hrfSpnUDNsVv6pLQM4v0UFUk2yrq3m8yPYiss2YT">
    <link href="http://localhost:8000/css/app.css" rel="stylesheet">
  </head>
  <body>
    <div id="root">
      <ps-header></ps-header>

      <router-view>

      </router-view>
      <ps-footer></ps-footer>
    </div>
    <script src="http://localhost:8000/js/app.js"></script>
  </body>
</html>

VueJS 路由 - routes.js

import VueRouter from 'vue-router';

let routes = [
  {
    path: '/',
    name: 'home',
    component: require('./components/views/pages/home.vue')
  },
  {
    path: '/faq',
    name: 'faq',
    component: require('./components/views/pages/faq.vue')
  },
  {
    path: '/register',
    name: 'register',
    component: require('./components/views/pages/register.vue')
  },
  {
    path: '/login',
    name: 'login',
    component: require('./components/views/pages/login.vue')
  },
  {
    path: '/testPage',
    name: 'testPage',
    component: require('./components/views/pages/testPage.vue')
  }
]

export default new VueRouter({
  routes,
  linkActiveClass: 'is-active',
  mode: 'history'
});

Laravel 路由 - web.php

Route::get('/{vue?}', function () {
    return view('index');
})->where('vue', '[\/\w\.-]*');

Route::get('/reservation/date/{date}', 'ReservationContoller@getScheduleForDate'); //route in question
Route::resource('/reservation', 'ReservationController');
Route::get ('/admin', 'AdminController@index');
Route::get('/home', 'HomeController@index')->name('home');
Auth::routes();

如何将我的 Laravel 路由与我的 VueJS 路由结合使用？

【问题讨论】：

删除 uri 末尾的 / ？ /reservation/date/2018-11-13
Vue 路由应该是最后一个 ... 否则它也会匹配所有其他路由。
@simonecosci 删除尾随 / 不幸的是没有影响
@simonecosci 我已将 vue 路由放在 web.php 的末尾，但也没有用。好吧，我的错，看起来它确实与它有关，看起来我收到了 500 错误，所以它的东西。
你做了php artisan route:clear 吗？

标签： laravel vue.js routes axios

【解决方案1】：

正如 OP 的 cmets 中所提到的，它恰好是我在 web.php 文件中的路由排序。为了清楚起见，这是更新的文件

Route::get('/reservation/date/{date}', 'ReservationController@getScheduleForDate');
Route::resource('/reservation', 'ReservationController');
Route::get ('/admin', 'AdminController@index');
Route::get('/home', 'HomeController@index')->name('home');
Auth::routes();

Route::get('/{vue?}', function () {
    return view('index');
})->where('vue', '[\/\w\.-]*');

不需要在其他任何地方进行更改，原始 web.php 文件中也有错字，因为错误响应返回时带有未知控制器。只需修改名称即可。

当我输入它谈论 VueJS 路由干扰 Laravel 路由时应该点击一下。我确实重新组织了它，但 vue 路线让我忘记了。

如果重新排序路由不起作用，我会继续清除缓存和路由

php artisan route:clear
php artisan cache:clear

【讨论】：