vue-router4动态路由刷新404或白屏怎么解决
更新时间：2023-11-08
前言：在使用 Vue Router 4 动态路由时，有时可能会遇到刷新页面后出现 404 错误或者白屏的问题。这是因为 Vue Router 的默认模式是 history 模式，它使用 HTML5 的 history API 来管理路由，而在 history 模式下，直接刷新页面会向服务器发送请求，服务器无法找到对应的路由而返回 404 错误。本文将介绍两种解决这个问题的方法。
方法一：后端配置
首先，在后端服务器上配置一个万能路由，使得服务器在收到任意请求时都能返回同一个页面，而不是 404 错误页面。具体的配置方法根据后端服务器的不同而有所不同，以 Nginx 为例，可以在 Nginx 的配置文件中添加如下配置：
```
location / {
try_files $uri $uri/ /index.html;
}
```
这里的 /index.html 是前端入口文件的路径，根据实际情况进行修改。
方法二：前端配置
如果无法进行后端配置，可以尝试在前端代码中配置一个 404 页面来解决这个问题。具体的配置方法如下：
1. 在项目的 src 目录下创建一个名为 404.vue 的文件，作为 404 页面的组件，可以在这个文件中编写自定义的错误提示信息。
2. 在路由配置文件（通常是 router/index.js）中添加一个名为 404 的路由，将这个路由指向刚刚创建的 404 组件，在路由配置文件中添加如下代码：
```javascript
import NotFound from '@/components/404.vue'
const routes = [
// 其他路由配置...
{
path: '/404',
component: NotFound
},
{
path: '*',
redirect: '/404'
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
```
上面的代码中，使用了通配符 * 来匹配所有路由未匹配到的情况，将其重定向到 /404 路由。
3. 修改入口文件（通常是 main.js）中的代码，确保在创建 Vue 实例前，将路由实例挂载到根实例中，修改后的代码如下：
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
```
这样，在刷新页面时，Vue Router 将会优先匹配到 /404 路由，从而显示自定义的 404 页面。
总结：以上就是解决 Vue Router 4 动态路由刷新 404 或白屏的两种方法，根据实际情况选择合适的方法进行配置。使用后端配置可以保证在任何情况下都能正常访问到页面，但如果无法进行后端配置，则可以通过在前端配置一个 404 页面来解决问题。希望以上内容对你有帮助！
