Vue router 4 - 404 error page when page is refreshed

Question

I'm working on a wordpress headless theme using vue 3.

I've implemented vue router and it seems working correctly when the page is loaded, but I've noticed that when the user change the route and refresh the page, a 404 error page will be displayed to the user.

This is the code I have in my router file

import { createRouter, createWebHistory } from 'vue-router'
//
import UserLanding from '../components/UserLanding.vue'
import UserRegistration from '../components/UserRegistration.vue'

const router = createRouter({
    history: createWebHistory(window.location.pathname),
    routes: [
        {
            name: 'UserLanding',
            path: '/',
            component: UserLanding
        },
        {
            name: 'UserRegistration',
            path: '/registration',
            component: UserRegistration 
        }
    ]
})

export default router

# BEGIN WordPress
# Le direttive (linee) tra `BEGIN WordPress` e `END WordPress` sono
# generate dinamicamente, e dovrebbero essere modificate solo tramite i filtri di WordPress.
# Ogni modifica alle direttive tra questi marcatori verrà sovrascritta.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /wpdev/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wpdev/index.php [L]
</IfModule>

# END WordPress

<IfModule mod_rewrite.c>
Options All -Indexes
</IfModule>

Is there any way to make the things working as expected? Do I need to do a particular configuration on .htaccess or in WP functions file of the theme to avoid that when the page is reloaded the error occur?

Why vue router will not reload the desired route?

It's all explained in vue-router docs: https://router.vuejs.org/guide/essentials/history-mode.html#html5-mode — Igor Moraru, Jan 25 '23 at 15:15
Does this answer your question? [Vue Router return 404 when revisit to the url](https://stackoverflow.com/questions/36399319/vue-router-return-404-when-revisit-to-the-url) — Daniel Beck, Jan 25 '23 at 16:50
@IgorMoraru Already seen that example and will not work in my case. You need to consider I'm in a WP envoirment — ICTDEV, Jan 27 '23 at 07:48
@DanielBeck I'm in WP and the .htaccess is already set to redirect all the requests to index.php file. My vue app is inside a page template of an headless WP theme so I don't really need to change anything into the .htaccess ? — ICTDEV, Jan 27 '23 at 07:51
Well, if you’re getting 404 errors, that’s pretty good evidence that it’s not redirecting. Hard for us to say why without seeing your config. — Daniel Beck, Jan 27 '23 at 14:20

score -1 · Answer 1 · answered Jan 25 '23 at 16:52

-1

Wou need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!

Check the Example Server Configurations to do it for your server.

answered Jan 25 '23 at 16:52

Tolbxela

4,767
3
21
42

I'm in a wordpress envoirment so I don't have an html file but a php one. I've already seen the Example provided by vue router configuration, but didn't hepled. I also need to resèect the rewrite rules that wordpress set in .htaccess – ICTDEV Jan 27 '23 at 07:47

Vue router 4 - 404 error page when page is refreshed

1 Answers1