I need to change the route of my page from mysite/practice to mysite/practice/new
I have a React project set up in laravel with lumen.
routes.php:
$app->get('/practice', ['as' => 'pet_practices', 'middleware' => 'check_vet_roles', 'uses' => 'PetsController#practice']);
PetsController.php
public function practice(Request $request)
{
$variables =$this->getUserInfo($request);
return view('practice-profile') ->with('variables', $variables);
}
practice-profile.blade.php
#extends('layouts.master')
#section('content')
<div id="practice-profile"></div>
#endsection
My JSX file
var React = require('react');
var ReactDOM = require('react-dom');
var PageCollectionComponent = require('./PageCollectionComponent');
if (document.getElementById('practice-profile')) {
ReactDOM.render(<PageCollectionComponent />,document.getElementById('practice-profile'));
}
Everything works fine in this setup. When I go to mysite/practice page loads fine.
But if I change the route to
$app->get('/practice/new', ['as' => 'pet_practices', 'middleware' => 'check_vet_roles', 'uses' => 'PetsController#practice']);
and go to mysite/practice/new it doesn't work anymore. The layout loads from the blade file, but it doesn't get to the JSX file anymore. Why is that?
In the console, I get this error:
Uncaught SyntaxError: Unexpected token :
I'm fairly new to this project so it's probably something fundamental that I am missing here.
It's hard to tell without more info. But, maybe the problem occurs because you're moving up a directory level, make sure that your JS file is being loaded from the correct location. If you're using a relative path like <script src="app.js"></script> then going a level deeper will try to request yoursite/practice/app.js instead of yoursite/app.js.
Related
I'm basically using VueRouter to create all my routes which is working really well. However, my application is built using Laravel. So if I refresh any of the routes I get an error that the route is not defined. So at the minute in every controller I've had to add an index function. This just returns the view of my app.blade which is just the usual tags etc and the to load my single page app. I'm just wondering if there is a cleaner solution? I guess I could move the return view into a single Controller and make my Controllers extend this. But I'm just wondering if there is a better way I'm missing?
i.e. one of my routes via VueRouter:
{
path: "/clients",
name: "clients",
component: () => import(/* webpackChunkName: "clients" */ "../resources/js/components/Views/Clients/Clients.vue")
},
The route in my clients.php file
Route::get('/clients', [App\Http\Controllers\ClientController::class, 'index'])->name('clients');
Then the ClientController index function
public function index()
{
return view('app');
}
It would just be nice to have the loading of the app.blade done somewhere else and not need to be specified per controller. Any help would be appreciated to ensure it's all done efficiently!
Thanks!
Here is how I solved this issue for one of my projects which is also single page application in Vue and Laravel: https://github.com/lyyka/laravel-vue-blog-spa/blob/master/routes/web.php
Simply, in your routes file, you put this code:
Route::get('/{any}', function () {
return view('welcome');
})->where("any", ".*");
And in my welcome view I have:
#extends('layouts.app')
#section('content')
<div class = "container">
<router-view></router-view>
</div>
#endsection
Basically this will return your app view for any URL and so your Vue SPA should work properly. Generally, it is not a good practice to put callback functions inside your routes file, but in this case, you won't even be using your routes file as it is a SPA, so this solution can pass! :)
You should use your single html file and make a controller.
On your controller
public function index(){
return view('index');
}
on your web.php
basically, you should make the same route on your laravel and vue
Route::get('/products', [ProductsController::class,'index']);
in my vue-routes
import Products from './components/Products.vue'
{
path:'/products'
component: Products
}
i'm adding vue js into my current laravel apps so i can make it SPA and thats mean laravel is only acting as backend and rest of it is controlled by vue js from rendering view to routing.
My current laravel apps using kodeine laravel-acl for controlling which page and which action that my user can do by simply
put this in route:
Route::get('admin', [
'as' => 'admins.admin.index',
'uses' => 'UserController#index',
'middleware' => ['auth', 'acl'],
'can' => 'view.admin_view']);
and if i just do this in view to hide some action if user don't have permission
#permission('view.admin_view')
//some link or button
#endpermission
and all these permission is stored in mysql database and each user have different set of permission.
but how to do that if i making it vue js SPA? since all route is controlled via vue js?
You can perform checks before going to a certain route via beforeEnter() in routeConfig. Sample is here:
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ... Do your checkings here
}
}
]
})
To simply permission detection logic you can use CASL - https://github.com/stalniy/casl
There are a lot of interesting stuff in documentation and articles on medium explaining how integrate with Vue and other popular frameworks!
I am pretty new to Laravel, I am so confused on how to start this. but basically I have a switch statement with different display mode cases and what I am trying to do is to connect routing with blade. How do I display $mycontent in blade based on cases like these ? Thanks
switch(MyPage::$some_display_mode) {
case 'normal':
$mycontent //this is what I want to display in blade
case 'ajax':
case 'other'
}
I want to connect these cases normal,ajax ,other etc with with different MyPages that I have so that I can display my blade files something like this
<html>
#yield('content)
</html>
#section('content')
whatever comes from the pages
#endsection
You can use route groups and do something similar to this:
Route::group( [ 'prefix' => 'AJAX', 'namespace' => 'AJAX' ], function() {
Route::get( '/something', 'ajaxController#doSomething' );
});
There is multiple ways to group routes shown here:
laravel grouped routing
Then handle returning the view in the controller and the use template-inheritance as explaned here:
laravel template-inheritance
This way will allow you to group and keep your routes organized
I'm doing a website based laravel 4.2 and Bootstrap. I want a bootstrap modal pop up dialog to load on certain routes provided that the user is not already logged in.
So far i have accomplsihed it to load for the entire application upon loading which is not i want but am in the right direction.
This is my ajax call
script type="text/javascript"> $(document).ready(function() {
$.get("status", function(data, status){
data.status == false ? $('#modal-form').modal({backdrop: 'static'}) : $('#modal-form').modal('hide');
});
});
Status refers to a URL defined in this route
Route::get('/status', 'LoginController#getLoginStatus');
and the method is defined here
public function getLoginStatus()
{
return Response::json(array( 'status' => Sentry::check()));
}
From that, the modal dialog loads on each route across the entire application. I would want to limit the dialog to load on certain routes provided the user is not logged in.
Thing Laravel filter would do the trick for me but i have failed to do so.
Something like
Route::filter('status', function()
{
});
and then the route be like:
Route::get('profile', array('as' => 'submit-profile','before' => 'status','uses' => 'ProfileController#getProfile'));
Thanks guys hope you can give me some advice.
You could use the
Route::currentRouteName()
to check what route your on and then do your preferred action,
like calling the ajax get request for the modal.
I'm creating an authorization system in my Laravel 4 project. I am trying to use the auth "before" filter.
In my routes.php file, I have:
Route::get('viewer', array('before' => 'auth', function() {
return View::make('lead_viewer');
}));
Route::get('login', 'LoginController');
The before filter calls this line in the filters.php file:
Route::filter('auth', function()
{
if (Auth::guest()) return Redirect::route('login');
});
I can manually navigate to my login route. But the auth system isn't letting this happen. I've run composer dump-autoload a couple of times, so that isn't the problem. What am I doing, since I can actually load the login page if I do it manually?
I figure it out. Laravel is looking for a named route: I had to do this:
Route::get('login', array('as' => 'login', function() {
return View::make('login');
}));
An interesting, not very intuitive approach in Laravel. But there must be a reason Taylor did this that I'm not seeing.
To do what you were trying to do in your initial approach you could have just done:
Route::filter('auth', function()
{
if (Auth::guest()) return Redirect::to('/login');
});
and it would have worked just fine.
If you want to use named routes then you do what you posted in your answer to your own question. Essentially...more than one way to skin a cat.
Hope that helps
I know you've probably solved this by now but after stumbling across your post while trying to solve a similar problem, I wanted to share my thoughts...
Laravel is NOT looking for a named route for the guest method, it is expecting a path.
Your example works because because the named route and the path are the same i.e. "login". Try changing your URL to something other than 'login' and watch it fail.
If you want to use a named route you should use the route helper method as so...
if (Auth::guest()) return Redirect::guest( route('login') )
Hope that helps someone.