Vue 路由器 4 - 刷新页面时出现 404 错误页面

Question

我正在使用 vue 3 开发一个 wordpress headless 主题。我已经实现了 vue 路由器并且在加载页面时它似乎工作正常，但我注意到当用户更改路由并刷新页面时，出现 404 错误页面将显示给用户。

这是我的路由器文件中的代码

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>

有什么方法可以使事情按预期工作吗？ 我是否需要在.htaccess或主题的WP函数文件中进行特定配置，以避免在重新加载页面时发生错误？

为什么 vue router 不会重新加载所需的路由？

Answer 1

您需要配置您的服务器以使用 .htaccess 文件正确处理路由，以将所有请求重定向到 index.php 文件，然后该文件将使用 Vue Router 在客户端处理路由。

您可以在 .htaccess 文件中的 WordPress 路由规则之后添加以下内容：

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

Answer 2

您需要做的是向您的服务器添加一个简单的万能回退路由。 如果 URL 与任何 static 资产都不匹配，它应该提供与您的应用程序所在的相同index.html页面。美丽，再次！

检查示例服务器配置以对您的服务器执行此操作。