The question is pretty simple.
in order to build a Simple Page Application (SPA) with Laravel and VueJS , should all the paths present in router.js ( the file defining paths for SPA) be also present in web.php of Laravel ?
For example I am using the source code from here :
router.js inside resources/assets/js/frontend has :
export default [
{ path: '/create', component: SubmitTicketFormComponent },
{ path: '/view/:ticketId', name: 'client-view-ticket', component: ViewTicketComponent, props: true }
];
But the web.php inside routes folder has
Route::get('/', function () {
return view('welcome');
});
Route::get('/admin', function () {
return view('admin');
});
Route::post('/login', 'Auth\LoginController#login');
Route::post('/logout', 'Auth\LoginController#logout')->name('logout');
//Auth::routes();
Route::get('/home', 'HomeController#index')->name('home');
And the api.php inside routes folder has :
Route::middleware('auth:api')->group(function() {
Route::get('/profile', 'ProfileController#index');
Route::apiResource('/admin/tickets', 'Admin\TicketsController');
});
Route::apiResource('tickets', 'TicketsController');
So what are the rules regarding the path or route declaration for both VueJs and Laravel ?
If you want to have a SPA and keep some of the Laravel pages you need to have a route like this:
Route::get('/{any}', 'VueController#index')->where('any', '.*');
This can be at the end of your routing file, so if it does not match the existing Laravel routes and it will open the Vue SPA and the routing will be handled from there.
Related
I using laravel + vuejs
Backend use laravel (/admin)
In routes/web.php
...
Route::get('/{any?}', function () {
return view('welcome');
})->where('any', '^(?!api\/)[\/\w\.\,-]*');
When I run some url
test.com/admin
test.com/admin/users
-> All redirect to welcome layout
How to config to vue-router only run exclude /admin (backend)
Route::get('/{any?}', function () {
return view('welcome');
})->where('any', '^(?!admin).+');
It's just a regex problem, try this
I'm building an SPA. In my web.php file I have this:
Route::get('/{any}', function () {
return view('welcome');
})->where('any', '.*');
Which is great, and I'm using Vue-Router for routing.
But I'm trying to add Stripe payments and in a lot of these videos that I've seen or articles that I've read, they often are still working with a few .blade files as well as .vue components.
I want to add a route for a blade file called checkout.blade.php
So now I will have this in web.php:
Route::get('/{any}', function () {
return view('welcome');
})->where('any', '.*');
Route::view('/checkout-now', 'checkout');
The issue is I don't see anything, just a blank white page when I go to this route, I assume it has to do with the first Route, but how do I get around this? How can I see .blade routes in my SPA?
In this case I recommend to keep all your routes before the any route.
Route::view('/checkout-now', 'checkout');
.
.
Route::get('/{any}', function () {
return view('welcome');
})->where('any', '.*'); // Must be at the end
if you just need few route for vue router
$paths = ['vue-path', 'vue-path-id'];
foreach ($paths as $path) {
Route::get($path, function () {
return view('welcome');
});
}
Route::view('/checkout-now', 'checkout');
I need to disable all routes for guests in Laravel except '/' and 'login' pages.
Does that possible to implement it routes/web.php ?
Yes. In your routes/web.php file, make sure to define your protected routes under the auth middleware group.
routes/web.php
Route::get('/', function() {
// / route
});
Route::get('/login', function() {
// login page
});
Route::middleware(['auth'])->group(function () {
// define your routes here
// they'll be protected
});
Official documentation
Since Laravel 7.7 you can use excluded_middleware property eg:
Route::group([
'excluded_middleware' => ['auth'],
], function () {
Route::get('/', 'HomeController#index');
...
});
Using Laravel 5 migrated from 4.2 now laravel 5 is installed in subfolder "abc" do i have to write abc/warehouse for every route ? previously it was /warehouse. i want to use all existing routes like /warehouse inside subdirectory abc.
i am on localhost xampp with port 81. http://localhost:81/warehouse
any one here with quick solution
You use prefix when defining routes:
Route::prefix('abc')->group(...)
Route Prefixes
Route::prefix('abc')->group(function () {
Route::get('warehouse', function () {
// Matches The "/abc/warehouse" URL
});
});
Ideally you should do it in the RouteServiceProvider
Route::middleware('web')
->prefix('abc')
->namespace($this->namespace)
->group(base_path('routes/web.php'));
This way everything in the routes file is prefixed and you dont need the extra group wrapping.
Here's the example from the 5.0 docs:
Route::group(['prefix' => 'admin'], function() {
Route::get('users', function() {
// Matches The "/admin/users" URL
});
});
what you can do is add a line in RouteServiceProvider in mapWebRoutes function like this
public function mapWebRoutes()
{
//default
Route::middleware('web')
->namespace($this->namespace)
->group(base_path('routes/web.php'));
//subfolder
Route::middleware('web')
->prefix('abc')
->namespace($this->namespace)
->group(base_path('routes/abc.php'));
}
then create a file inside routes/abc.php and copy paste all your routes inside it
Route prefix https://laravel.com/docs/5.6/routing#route-group-prefixes
For laravel 5.0 you have to wrap inside Route::group
Route::group(['prefix' => 'abc', 'namespace' => 'Auth'], function(){
//define all your routes here
Route::post('login', 'AuthController#login');
});
Namespace: Here i have define Auth in namespace that means my all controllers like AuthController files should be inside app/Http/Controllers/Auth folders.
Laravel route 5.0 https://laravel.com/docs/5.0/routing#route-group-prefixes
For laravel 5.0 namespace structure check this https://laravel.com/docs/5.0/structure
I'm using Laravel 5.4 and vue-js 2.4
Laravel routes
Route::get('/', 'HomeController#home');
HomeController
public function home(Request $request) {
return view('app');
}
Vue router
const routes = [
{ path: '/', name: 'home', component: App},
{ path: '/about', component: About },
];
When I click on this, about component is well displayed and the url is example.com/about
<router-link to="/about">About</router-link>
Issue
When I enter example.com/about, I'm redirected to the home page of my vue app which is example.com.
What should I do so the about can reach vue-router ?
Route::get('/{component?}', 'HomeController#home');
Seems to be working
Add a route to your about page on laravel just like / route:
Route::get('/', 'HomeController#home');
Route::get('/about', 'HomeController#home');