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

Question

I'm trying to make a get request. 我正在尝试获取请求。

My project is set up as a SPA, so VueJS is handling the routes for each of my 'pages'. 我的项目设置为SPA，因此VueJS正在处理我的每个“页面”的路线。

I think I've narrowed down that VueJS routes are interfering with the Laravel routing, as whichever invalid endpoint I visit /someEndPoint, under dev tools I always receive the same html response as below. 我想我已经缩小了VueJS路由正在干扰Laravel路由的问题，因为无论我访问了/ someEndPoint还是哪个无效端点，在开发工具下我总是会收到以下相同的html响应。 And I can also make a post request and data can be entered into my database which is fine. 而且我还可以发出发布请求，并且可以将数据输入到我的数据库中。 But whatever get request I attempt it won't enter the specified Controller's function 但是我尝试的任何获取请求都不会进入指定的控制器功能

Here's a standard get request I'm trying to make 这是我要提出的标准获取请求

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);
  });

Response with status code 200 状态码为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 - routes.js VueJS路线-route.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 routes - web.php 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();

How do I use my Laravel routes in conjunction with my VueJS routes? 如何将Laravel路由与VueJS路由结合使用？

Answer 1

As mentioned in the comments of the OP, it happened to be the ordering of my routes in the web.php file. 正如OP的评论中所提到的，它恰好是web.php文件中我的路由的顺序。 Here's the updated file for clarity 为了清楚起见，这是更新的文件

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\.-]*');

No changes needed to be made anywhere else, also had a typo in the original web.php file as the error response came back with a unknown controller. 无需在其他任何地方进行更改，原始web.php文件中也有错别字，因为错误响应通过未知的控制器返回。 Just needed to fix the name. 只需修复名称即可。

Should have clicked when I was typing it out talking about the VueJS routes interfering with Laravel routes. 在我输入时应该已经单击，谈论有关VueJS路由干扰Laravel路由的问题。 I did reorganise it but the vue route slipped my mind. 我确实对其进行了重组，但是主意路线让我无所适从。

If reordering the routes doesn't work, I'd go ahead and clear the cache and route 如果无法重新排列路线，请继续清除缓存和路线

php artisan route:clear
php artisan cache:clear

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-11-16 08:53:50

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-11-16 08:53:50

解决方案1
1 已采纳 2018-11-16 08:53:50