CODEWITHSUNDEEP
laravelvue.jsroutesaxios
Mark
Mark

Reputation: 621

laravel - Vuejs routes conflicting with Laravel routes, trying to make an axios request

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'.

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. 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

<!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

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

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?

Upvotes: 0

Views: 3176

Answers (1)

Mark
Mark

Reputation: 621

As mentioned in the comments of the OP, it happened to be the ordering of my routes in the web.php file. 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. Just needed to fix the name.

Should have clicked when I was typing it out talking about the VueJS routes interfering with Laravel routes. 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

Upvotes: 1

Related Questions