Vue Router切换history模式后子路由访问空白页问题求助

核心原因 #

使用history模式时，直接访问子路由（如/order/callback），浏览器会向服务器请求该路径对应的物理文件，但服务器上不存在这个文件，因此返回空白页面。需要配置服务器将所有路由请求转发到项目的index.html，由Vue Router接管路由逻辑。

解决方案 #

1. 开发环境（Vue CLI）配置 #

在项目根目录的vue.config.js中添加devServer配置：

module.exports = {
  devServer: {
    historyApiFallback: true
  }
}

该配置会让开发服务器将所有404请求重定向到index.html，确保Vue Router能正确解析子路由。

2. 生产环境（以Nginx为例）配置 #

修改Nginx站点配置文件，添加如下规则：

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

这条规则会让Nginx优先尝试访问请求路径对应的文件或目录，若不存在则返回index.html，交由Vue Router处理路由。

路由配置优化（建议） #

你的两个路由name属性均为linetest，虽然不影响功能，但可能导致路由跳转时出现混淆，建议修改为不同名称：

import Vue from "vue";
import Router from "vue-router";

const $ROLE = getRole;

Vue.use(Router);

const router = new Router({
    mode: "history",
    linkExactActiveClass: "active",
    routes: [
        {
            path: "/order",
            name: "orderCancel", // 修改名称
            component: () => 
                import(/* webpackChunkName: "demo" */ "./views/LineLiff/CancelOrder.vue"),
            meta: {
                guest: true,
            },
        },
        {
            path: "/order/callback",
            name: "orderCallback", // 修改名称
            component: () => 
                import(/* webpackChunkName: "demo" */ "./views/LineLiff/CancelOrder.vue"),
            meta: {
                guest: true,
            },
        },
    ],
});

export default router;

内容的提问来源于stack exchange，提问作者Mr.DCPM