Im trying to build SPA and I need to make axios call to endpoint in my routes. How can make this api call work?
Here are my routes
Route::get('/{any}', function () {
return view('default');
})->where('any', '.*');
Route::get('events', 'EventsController#index')->prefix('api');
Any suggestion?
You must go to the folder routes->api and create your api routes, there is automatically the api prefix.
in your .vue
axios.get('/api/getUser')
.then(data => {
console.log(data)
});
in your folder routes->api
Route::get('/getUser', 'Api\UsersController#getUser');
To not put "/api" in front of all your axios calls in your '.vue' you can put
axios.defaults.baseURL = '/api';
in your app.js
We define a catch-all route to the SpaController which means that any web route will map to our SPA. If we didn’t do this, and the user made a request to /hello, Laravel would respond with a 404.
Route::get('/{any}', 'SpaController#index')->where('any', '.*');
Remember that this route will always be putted on the last part of your web routes after declaring your other routes
use this
Route::any('{all}', function () {
return view('default');
})
->where('all', '^(?!api).*$')
->where('all', '^(?!storage).*$');
Route::get('events', 'EventsController#index')->prefix('api');
as you will need api and storage route handel by laravel
Related
I'm building a SPA with Laravel and Vue. However, I need to make an API call with axios but it's not working.
Here's my web.php:
Route::get('/{any}', function () {
return view('index');
})->where('any', '.*');
Here's my api.php route:
Route::get('/notification', 'NotificationController#index');
Whenever I make an API call, it shows a blank or broken page.
Could you please give me any suggestion about this issue and solve?
You should prevent api routes from being captured by web.php route.
First, prefix api routes:
api.php
Route::get('/api/notification', 'NotificationController#index');
Then, exclude prefixed routes from web routes:
web.php
Route::get('/{any}', function () {
return view('index');
})->where('any', '^(?!api).*$');
I am trying to get a laravel-nuxt project running. I am stuck with creating route calls to my laravel backend using axios async call to serve up data to my nuxt frontend before loading the page.
I am constantly getting getting a 404 with my current laravel-nuxt setup even though I have the route defined in api.php.
I am using this as a template for the project and I have not changed anything in that template yet:
https://github.com/cretueusebiu/laravel-nuxt
So my frontend call is this here:
async asyncData ({ $axios }) {
if (process.server) {
return $axios.$get('/api/data')
.then((res) => {
this.data = res.data;
})
}
}
And my backend route is defined as follows in api.php:
Route::get('/data', 'HomeController#index');
It always gives me a 404, is there something missing that I should be aware of?
According to the Readme in the Github project you have mentioned, you have to add your routes manually to
client/router.js
Read this line under Notes and follow the structure well you'll be able to avoid this.
This project uses router-module, so you have to add the routes
manually in client/router.js.
hope this helps.
Let's say I am defining the following route in Laravel 5.3:
Route::resource('bands', 'BandController');
The default route example coming when you start a new Laravel project has the following:
Route::get('/', function () {
return view('welcome');
});
How do I make bands route to be the default one when no controller is called instead of welcome? Meaning /?
I did read docs here but didn't found anything. Any?
Place that block inside laravel/app/routes.php instead of a Controller (4.x)
Place that block inside laravel/app/Http/routes.php instead of a Controller (5.1)
Place that block inside laravel/app/routes/web.php instead of a Controller (5.3)
Route::get('/', function()
{
return view('welcome');
});
You can redirect default to anywhere you want, i.e.:
Route::get('/', function()
{
return Redirect::to( '/bands');
// OR: return Redirect::intended('/bands'); // if using authentication
});
As #Patrick mentioned, you can simply redirect to the /bands route. However, I have to warn you that the redirect will actually change the URL in the navigation pane of the web browser. I would have suggested that you just ask the home route to use the index method of your BandController as follows:
Route::get('/', ['uses'=>'BandController#index']);
In using AngularJS on top of Laravel, assuming I have this route in Laravel:
Route::get('/admin/', function() { return View::make('pages.writer'); });
which makes a view that loads AngularJS components, including $routeProvider, and that the configuration is like so:
$routeProvider.when('/writer/:publicationName?', {
templateUrl: '/templates/writer.html',
controller: 'WriterCtrl',
caseInsensitiveMatch: true
}).otherwise({
templateUrl: '/templates/library.html',
controller: 'LibraryCtrl'
});
If I call the URL: /admin/writer/My-Favorite-Publication, I get a Laravel error because the route doesn't exist. Is there a way to tell Laravel when Angular routing takes over for a particular URL (i.e. anything after /admin/), so that I can use $routeParams.
You need to define a catch-all route that will return the base view that runs AngularJS app and let AngularJS handle the rest of the routing.
This will do the trick:
Route::get('/admin/{ignore?}', function() {
return View::make('pages.writer');
})->where('ignore', '.*');
This will make everything that starts with /admin match this Laravel route.
I am building an app with Lumen for the backend and angular for the frontend. Lumen handles routes and serves the basic templates with a header and footer, where angular takes over to control the content. I am trying to add a url parameter to a route, but it breaks all my paths to scripts as it sees it as a subdirectory not a parameter. My route looks like this in Lumen:
$app->group(['prefix' => 'user', 'middleware' => 'auth'], function($app) {
$app->get('{any}', function() {
return view('index');
});
$app->get('detail/{userId}', function() {
return view('index');
});
});
I have a url of example.com/user/create that works fine, but as soon as I use example.com/user/detail/101 it breaks. How do I set it up so all my angular paths are not destroyed as I add parameters? I would like to stay away from adding the absolute url path as I really don't want to manage differing urls through dev/stage/production environments.
EDIT:
The following routes work and do not break css/script paths:
example.com/user
example.com/user/create
The following route does break paths:
example.com/user/detail/101
Add the any route after the detail/{userId} route.
In general, any "catch-all" routes need to go at the end so they don't interfere with anything.