VueJs page gives 404 on refresh

Question

I just uploaded my blog app to a test server. When I click on post from the homepage I am able to view the single page using the slug URL. However, from the single page, If I refresh the page it gives me a 404 page.

I had used something like the below for my users component:

Route::get('/admin/users{vue_capture?}', function () {
    return view('admin');
})->where('vue_capture','[\/\w\.-]*');

This is how my routes.js looks like:

import VueRouter from 'vue-router';
import Admin from './components/Admin.vue';
import Homepage from './components/Homepage.vue';
import Subscriber from './components/subscriber/Main.vue';
import Single from './components/Single.vue';
import Categories from './components/Categories.vue';

let routes = [
    {
        path: '/',
        component: Homepage
    },
    {
        path: '/subscriber',
        component: Subscriber
    },
    {
        path: '/post/:slug',
        name: 'post',    
        component: Single
    },
    {
        path: '/categories/:slug',
        component: Categories
    }
];

export default new VueRouter({
    mode: 'history',
    routes
});

And my Laravel routes are like this:

<?php
use App\User;
use App\Http\Resources\User as UserResource;
use App\Http\Resources\UserCollection;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
    return view('homepage');
});

Auth::routes();
Route::get('/logout', 'Auth\LoginController@logout')->name('logout' );
Route::get('/home', 'HomeController@index')->name('home');

/************************************************************
                            API'S
************************************************************/
Route::get('/api/homeposts', 'HomePostsController@posts')->name('homeposts');
Route::resource('/api/users', 'AdminUsersController');
Route::resource('/api/posts', 'AdminPostsController');
Route::resource('/api/categories', 'AdminCategories');
Route::get('/api/loggedUser', 'AdminUsersController@loggUser')->name('singleUser');
Route::put('/api/updatedUser/{id}', 'AdminUsersController@updateUser')->name('singleUserUpdate');

Route::resource('/api/subscriber', 'SubscriberController');
/*Route::get('/admin/users{vue_capture?}', function () {
    return view('admin');
})->where('vue_capture','[\/\w\.-]*');*/

/************************************************************
                        ADMIN ROUTES
************************************************************/
Route::group(['middleware'=>'admin'], function(){
    Route::get('/admin/users', 'AdminUsersController@users')->name('allusers');
    Route::resource('/admin/posts', 'AdminPostsController');
});

/************************************************************
                    SUBSCRIBER ROUTE
************************************************************/
Route::group(['middleware'=>'subscriber'], function(){
    Route::get('/subscriber/{vue_capture?}', function () {
        return view('homepage');
    })->where('vue_capture','[\/\w\.-]*');
});

/**********************************************************/

Route::get('/single/post/{slug}', 'AdminPostsController@single');

But how exactly can I handle for the single post page?

can you post your laravel entry point route? I mean home route. — Julian Paolo Dayag, Jul 18 '18 at 10:36
and please make sure that you add it at the BOTTOM of he `routes/web.php` file — Julian Paolo Dayag, Jul 18 '18 at 10:50

Julian Paolo Dayag · Accepted Answer · 2018-07-18T10:46:11.097

39

Assuming your entry point is the index method of your HomeController, you just need to add this route at the bottom of your routes/web.php file.

Route::get('{any}', function () {
    return view('homepage');
})->where('any','.*');

edited Jul 18 '18 at 10:46

answered Jul 18 '18 at 10:38

Julian Paolo Dayag

3,562
3
20
32

It doesnt give me any error, but I cannot see any vue component – Sidney Sousa Jul 18 '18 at 10:50
I already updated it. and also please make sure to put it at the BOTTOM of the web.php file – Julian Paolo Dayag Jul 18 '18 at 10:51
Yes yes, I placed that at the bottom of the file and it now works. Mind explaining the code and perhaps indicate a link where I can read more about it? Appreciate the support otherwise. – Sidney Sousa Jul 18 '18 at 10:53
In order for your router(vue-router) to work, you need to do something with your laravel router, which is to forward it the request to your entry point so that vue-router will be able to handle it instead of laravel. – Julian Paolo Dayag Jul 18 '18 at 10:55
Understood that part. And what if my entry point was not the index method of my HomeController? – Sidney Sousa Jul 18 '18 at 10:58
What we basically did here is tell laravel that if a route is not defined, just show the home page. and with this, vue will be able to handle it, if laravel can't handle it. – Julian Paolo Dayag Jul 18 '18 at 10:58
it doesn't really matter, you just need to tell laravel to display your view where your vue entry point or `app.js` is included if there is no available route in laravel that can handle it. – Julian Paolo Dayag Jul 18 '18 at 11:00
Got it. Once again appreciate the support. Happy coding – Sidney Sousa Jul 18 '18 at 11:02

score 2 · Answer 2 · answered Jul 18 '18 at 10:39

This isn't an issue with Vue.

When I visit the webpage http://blog.sidneylab.com/post/quasi-non-est-magnam-quae-aut-omnis-nisi (the first post on your website), I get a 404 error from the server itself. Same with anything else on /post/

That means your route handler isn't sending the relevant Vue index or code when a route matches. Ensure it does this with either the /post/ URL or just add a catch-all handler at the bottom of your default route handler:

Route::get("{any}", "DefaultHandler@myMethod")->where("any", ".*");

score 0 · Answer 3 · answered Aug 26 '19 at 22:36

0

add in the bottom of web.php

Route::get('{path}', 'HomeController@dashboard')->where('path','([A-z\d\-\/_.]+)?')`

answered Aug 26 '19 at 22:36

oussama benounnas

101
1
10

VueJs page gives 404 on refresh

3 Answers3