Scenario
I'm developing a web application using
Laravel 5.6.3
Vue 2.5.7
VueRouter 3.0.1
Setup
I'm using VueRouterlike
Vue.use(VueRouter);
import fooPage from './components/pages/fooPage.vue';
import barPage from './components/pages/barPage.vue';
const routes = [
{
path: '/foo',
component: fooPage
},
{
path: '/bar',
component: barPage,
}
]
const router = new VueRouter({
mode: 'history',
routes: routes
});
With
const app = new Vue({
el: '#app',
router,
})
And a:
<router-view></router-view>
In my markup.
Issue
When I perform a hard refresh on root (/), I can navigate between pages and the content loads fine. However, when I refresh on, say /foo - I can no longer navigate between the different pages properly.
You are probably looking towards this https://router.vuejs.org/en/essentials/history-mode.html.
Depending on your server's configuration, you should follow the steps in that web page.
I will copy apache and nginx ones since they are widely used.
Apache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Nginx
location / {
try_files $uri $uri/ /index.html;
}
Related
This is vuejs and laravel project. I am facing issue in backend when I type complete url with admin then it says not found. This is happening because I was getting 404 laravel error in refresh inside components. So I used the below route in web.php
Route::get('/{any?}', function () {
return view('index');
});
In Vuejs, I am using the following:
I am using webhistory in route
I am also using fallback route
{
path: "/:pathMatch(.*)",
name: "NotFound",
component: NotFound,
},
backend is based on laravel. Here is the .htaccess data
<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
Options -MultiViews -Indexes
</IfModule>
RewriteEngine On
# Handle Authorization Header
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]
# Send Requests To Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
</IfModule>
laravel route
I tried the below one:
Route::get('/{any?}', function () {
return view('index');
});
and this one also
Route::get('/{any}', function(){
return view('index');//pointing to the index file of the frontend
})->where('any', '.*');
Route::get('/admin',[AdminAuthController::class,'Create'])->name('create.login');
Route::post('/admin/login',[AdminAuthController::class,'Store'])->name('store.login');
Please suggest
I am using laravel 8 php 7.4. All route working fine on Local machine. But on Live serve Ubuntu 20.04 only one route is working that is / route.
My .htaccess file is in public folder and its content is
<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
Options -MultiViews -Indexes
</IfModule>
RewriteEngine On
RewriteRule ^(.*)$ public/$1 [L]
# Handle Authorization Header
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]
# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
</IfModule>
and my route file is
Route::get('/', function () {
return view('auth.login');
});
Auth::routes(['verify' => true]);
Route::post('user/login', [App\Http\Controllers\UserController::class, 'login'])->name('user.login');
Route::post('user/registration', [App\Http\Controllers\UserController::class, 'register'])->name('user.registration');
Route::get('/redirect', [\App\Http\Controllers\SocialAuthGoogleController::class, 'redirect']);
Route::get('/auth/google/callback', [\App\Http\Controllers\SocialAuthGoogleController::class, 'callback']);
Route::middleware(['auth', 'verified'])->group(function () {
Route::get('logout', [App\Http\Controllers\Auth\LoginController::class, 'logout'])->name('logout');
Route::get('show/energy/service/{id}', [\App\Http\Controllers\EnergyServiceController::class, 'show'])->name('show.energy.service');
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
Route::get('student', [\App\Http\Controllers\StudentController::class, 'index'])->name('student');
Route::post('student/add', [\App\Http\Controllers\StudentController::class, 'store'])->name('student.add');
Route::get('student/edit/{id}', [\App\Http\Controllers\StudentController::class, 'edit'])->name('student.edit');
Route::post('student/update', [\App\Http\Controllers\StudentController::class, 'update'])->name('student.update');
Route::get('student/delete/{id}', [\App\Http\Controllers\StudentController::class, 'delete'])->name('student.delete');
});
When I visit on any link This page appear
enter image description here
How can i resolved this thanks in advance
I am using vue-router and Laravel for my applcation.
I have a url: http://mywebapp.com/post/{id}
It works when i navigate normally by clicking the above link and vue router loads the component post.vue with route id as route parameter.
But when i refresh the page everything goes blank and vue is not mounted on
<div id="app"></div>
I don't think this is a server configuration issue because my .htaccess file is correctly configured and i don't get a 404 response.
<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
Options -MultiViews -Indexes
</IfModule>
RewriteEngine On
# Handle Authorization Header
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]
# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
</IfModule>
it just shows a blank page with no errors on the console so it's hard to trace the problem
The route
{
path: "/post/:id",
name: "Post",
component: Post,
meta: {
requiresAuth: false
}
}
The component
import Post from "./components/post/Post.vue";
when the component is loaded, it makes an Api request to fetch the post using the ID passed from the route
created() {
this.loading = true;
let url = `/post/${this.$route.params.id}`;
axios.get(url).then(response => {
this.loading = false;
this.post = response.data.post;
});
}
Route on api.php
Route::get('/post/{id}', 'PostsController#show');
Controller
public function show(Request $request, $id)
{
$post= Post::find($id);
return response()->json([
'post' => $clip
]);
}
The above codes works normally as expected when i navigate to a post but i just got a blank screen when i reload the browser with no errors reported on the console.
How do i fix this?
Your web.php find should contain a route that matches all routes:
Route::get('/{any}', 'SpaController#index')->where('any', '.*');
This way Laravel doesn't interfere with vue router links.
When I run this code by php artisan server it looks good but when I want use apache there is 404 response. But from beginning. Below are the fragments of the code:
Ajax:
$('.item_traveler').select2({
placeholder: 'Wpisz nazwisko podróżnego',
language: "pt-PL",
"language": {
"noResults": function(){
return "Nie znaleziono podróżnego";
},
"searching": function(){
return "Szukam w bazie podróżnych...";
}
},
ajax: {
url: '/autocomplete-ajax-traveler',
dataType: 'json',
delay: 250,
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.lastname+" "+ item.firstname+" | "+item.email+" | "+ item.city+", ul."+ item.address_street,
id: item.id
}
})
};
},
cache: true
}
});
Routing:
Route::get('/autocomplete-ajax-traveler', 'AutocompleteController#dataAjax_traveler');
Controller:
public function dataAjax_traveler(Request $request)
{
$data = [];
if($request->has('q')){
$search = $request->q;
$data = DB::table("travelers")
->select("id","lastname","firstname","email","city","address_street")
->where('lastname','LIKE',"%$search%")
->get();
}
return response()->json($data);
}
When I use php artisan serve it looks like:
When I use apache it looks like:
And my .htaccess file contains:
<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
Options -MultiViews -Indexes
</IfModule>
RewriteEngine On
# Handle Authorization Header
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]
# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
I'm working on it for 5 days without a result. Please help
on apache,
You have to give full path.
ie.
url: localhost/{Project folder name}/public/autocomplete-ajax-traveler
This way the request will reach your application.
I am new to the Laravel while I reading the documentation I had a problem under routing.. it shows we can pass verifiable like this,
Route::get('user/{id}', function ($id) {
return 'User '.$id;
});
here what is the user is it Controller or veritable name. I tried to pass the verbal like below but it is getting error
my route code is ,
Route::get('/{id}', function ($id) {
echo 'ID: '.$id;
});
Your route is correct
Route::get('/{id}', function ($id) {
echo 'ID: '.$id;
});
i have tested it and its working fine
Can you check .htaccess file under public folder.
<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
Options -MultiViews
</IfModule>
RewriteEngine On
# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/$ /$1 [L,R=301]
# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
# Handle Authorization Header
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
</IfModule>
Also make sure about laravel project folder name is spelled correctly
As you can see in the url field you trying to get to public/32 and you should try to request such a url:
http://localhost/blog-laravel/public/user/32