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?
laravel vue.js routes axios
asked Nov 16 '18 at 7:39
MarkMark
4171517
|
show 2 more comments
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?
laravel vue.js routes axios
asked Nov 16 '18 at 7:39
MarkMark
4171517
removing the trailing / at the end of the uri ? /reservation/date/2018-11-13
– simonecosci
Nov 16 '18 at 7:52
2
Vue route should be the last ... or it will match all other routes too.
– simonecosci
Nov 16 '18 at 8:06
@simonecosci removing the trailing / didn't have an affect unfortunately
– Mark
Nov 16 '18 at 8:42
@simonecosci i've placed the vue routes at the end of web.php, didn't work either. Okay my bad, looks like it did have something to do with it, looks like I'm getting a 500 error, so it's something.
– Mark
Nov 16 '18 at 8:45
1
did you dophp artisan route:clear?
– simonecosci
Nov 16 '18 at 8:47
|
show 2 more comments
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?
laravel vue.js routes axios
asked Nov 16 '18 at 7:39
MarkMark
4171517
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?
laravel vue.js routes axios
laravel vue.js routes axios
asked Nov 16 '18 at 7:39
MarkMark
4171517
asked Nov 16 '18 at 7:39
MarkMark
4171517
asked Nov 16 '18 at 7:39
MarkMark
4171517
asked Nov 16 '18 at 7:39
MarkMark
4171517
asked Nov 16 '18 at 7:39
MarkMark
4171517
4171517
removing the trailing / at the end of the uri ? /reservation/date/2018-11-13
– simonecosci
Nov 16 '18 at 7:52
2
Vue route should be the last ... or it will match all other routes too.
– simonecosci
Nov 16 '18 at 8:06
@simonecosci removing the trailing / didn't have an affect unfortunately
– Mark
Nov 16 '18 at 8:42
@simonecosci i've placed the vue routes at the end of web.php, didn't work either. Okay my bad, looks like it did have something to do with it, looks like I'm getting a 500 error, so it's something.
– Mark
Nov 16 '18 at 8:45
1
did you dophp artisan route:clear?
– simonecosci
Nov 16 '18 at 8:47
|
show 2 more comments
removing the trailing / at the end of the uri ? /reservation/date/2018-11-13
– simonecosci
Nov 16 '18 at 7:52
2
Vue route should be the last ... or it will match all other routes too.
– simonecosci
Nov 16 '18 at 8:06
@simonecosci removing the trailing / didn't have an affect unfortunately
– Mark
Nov 16 '18 at 8:42
@simonecosci i've placed the vue routes at the end of web.php, didn't work either. Okay my bad, looks like it did have something to do with it, looks like I'm getting a 500 error, so it's something.
– Mark
Nov 16 '18 at 8:45
1
did you dophp artisan route:clear?
– simonecosci
Nov 16 '18 at 8:47
removing the trailing / at the end of the uri ? /reservation/date/2018-11-13
– simonecosci
Nov 16 '18 at 7:52
removing the trailing / at the end of the uri ? /reservation/date/2018-11-13
– simonecosci
Nov 16 '18 at 7:52
2
2
Vue route should be the last ... or it will match all other routes too.
– simonecosci
Nov 16 '18 at 8:06
Vue route should be the last ... or it will match all other routes too.
– simonecosci
Nov 16 '18 at 8:06
@simonecosci removing the trailing / didn't have an affect unfortunately
– Mark
Nov 16 '18 at 8:42
@simonecosci removing the trailing / didn't have an affect unfortunately
– Mark
Nov 16 '18 at 8:42
@simonecosci i've placed the vue routes at the end of web.php, didn't work either. Okay my bad, looks like it did have something to do with it, looks like I'm getting a 500 error, so it's something.
– Mark
Nov 16 '18 at 8:45
@simonecosci i've placed the vue routes at the end of web.php, didn't work either. Okay my bad, looks like it did have something to do with it, looks like I'm getting a 500 error, so it's something.
– Mark
Nov 16 '18 at 8:45
1
1
did you do
php artisan route:clear ?– simonecosci
Nov 16 '18 at 8:47
did you do
php artisan route:clear ?– simonecosci
Nov 16 '18 at 8:47
|
show 2 more comments
1 Answer
1
active
oldest
votes
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
answered Nov 16 '18 at 8:53
MarkMark
4171517
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53333385%2flaravel-vuejs-routes-conflicting-with-laravel-routes-trying-to-make-an-axios%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
answered Nov 16 '18 at 8:53
MarkMark
4171517
add a comment |
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
answered Nov 16 '18 at 8:53
MarkMark
4171517
add a comment |
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
answered Nov 16 '18 at 8:53
MarkMark
4171517
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
answered Nov 16 '18 at 8:53
MarkMark
4171517
answered Nov 16 '18 at 8:53
MarkMark
4171517
answered Nov 16 '18 at 8:53
MarkMark
4171517
answered Nov 16 '18 at 8:53
MarkMark
4171517
4171517
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53333385%2flaravel-vuejs-routes-conflicting-with-laravel-routes-trying-to-make-an-axios%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
removing the trailing / at the end of the uri ? /reservation/date/2018-11-13
– simonecosci
Nov 16 '18 at 7:52
2
Vue route should be the last ... or it will match all other routes too.
– simonecosci
Nov 16 '18 at 8:06
@simonecosci removing the trailing / didn't have an affect unfortunately
– Mark
Nov 16 '18 at 8:42
@simonecosci i've placed the vue routes at the end of web.php, didn't work either. Okay my bad, looks like it did have something to do with it, looks like I'm getting a 500 error, so it's something.
– Mark
Nov 16 '18 at 8:45
1
did you do
php artisan route:clear?– simonecosci
Nov 16 '18 at 8:47