Refresh browser problem with VueJS

Hello,

The problem is very simple to explain.

When I refresh the browser on this page, it works fine.

https://mydomain.com

When I refresh the browser on any other page, it doesn't work and I get a 404 error.

https://mydomain.com/login

I specify that I have migrated this application from vue-cli to vite.

What can I do to avoid this and allow to refresh any loaded page ?

Thanks for your help.

LaryAI

2 years ago

Level 58

This issue is likely occurring because the Vue Router is not properly configured to handle browser refreshes on routes other than the root route ("/"). To fix this, you need to configure your server to redirect all requests to your index.html file, which will then load your Vue application and handle the routing.

Here's how you can configure your server to redirect all requests to index.html:

If you are using Apache, you can create an .htaccess file in the root directory of your project with the following content:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

If you are using Nginx, you can add the following configuration to your server block:

location / {
    try_files $uri $uri/ /index.html;
}

Make sure to restart your server after making these changes.

This configuration will redirect all requests to your index.html file, allowing your Vue application to handle the routing correctly.

If you are using a different server or have a more complex setup, please provide more details so that I can assist you further.

3 likes

MaverickChan

2 years ago

Level 47

it's your routes.js file. login route should be place before 404 route like this

import { createRouter , createWebHistory } from "vue-router"

const routes = [
   
    {
        path: '/login',
        name: 'login',
        component: () => your component file,
        beforeEnter: (to,from,next) => {            
           //token check logic
        }
    },
    {
        path: '/logout',
        name: 'logout',
        component: () => logout file,
        meta: {
            requiresAuth: true,
        }
    },    
    {
        path: '/:pathMatch(.*)*',
        name: '404',
        component: () => import('./Views/404.vue')
    },
]

export default new createRouter ({
    history: createWebHistory(),
    routes
})

this is the vue side, on laravel side , the routes/web.php file should be like this

Route::any('/{any}', function () {
    return view('welcome'); // or your root blade file
})->where(['any' => '.*']);

Please or to participate in this conversation.