Vue+Rails项目刷新vue-router路由无法渲染对应页面如何解决？

1. 修正vue-router子路由配置 #

你当前的子路由path以/开头属于绝对路径写法，不符合嵌套路由规范，需要调整为相对父路由的写法：

{
    path: '/',
    name: 'home',
    component: Home,
    children: [
      {
        path: '', // 空路径匹配父路由根地址/
        name: 'welcome',
        component: Welcome,
      },
      {
        path: 'classes/:id', // 去掉开头的/，拼接后完整路径为/classes/:id
        name: 'class',
        component: Class,
      },
      {
        path: 'classes/:id/members',
        name: 'member',
        component: Member,
      },
      {
        path: 'account',
        name: 'account',
        component: Account,
      },
      ...
    ]
  }

同时确认路由使用了history模式：

• Vue2 + vue-router@3 版本：在router实例配置中添加mode: 'history'，base参数设置为你的应用部署根路径（根部署则为base: '/'）
• Vue3 + vue-router@4 版本：创建router实例时使用createWebHistory('/')，传入参数为部署根路径

2. 确认父组件预留路由插槽 #

你的Home组件作为父路由容器，必须包含<router-view>标签，用于渲染子路由对应的组件，否则子路由内容无法展示，会始终显示Home组件内容。

3. 修正前端资源引用路径 #

所有在Rails入口模板（通常是home/index.html.erb或者全局layout）中引用的Vue打包后的js、css资源，必须使用绝对路径，也就是路径以/开头，例如：

<script src="/dist/js/app.js"></script>
<link rel="stylesheet" href="/dist/css/app.css">

不要使用相对路径（比如dist/js/app.js），否则在/classes/1这类二级路径刷新时，浏览器会尝试请求/classes/dist/js/app.js这类不存在的资源，导致页面加载异常。
如果是vue-cli/vite搭建的项目，需要在打包配置中设置publicPath为'/'（根部署场景），避免打包生成相对路径的资源引用。

4. 调整Rails路由顺序 #

你添加的通配符路由get '/*path', to: 'home#index'必须放在Rails路由配置的最末尾，确保不会覆盖你的API接口、静态资源等其他路由规则。

完成以上调整后，刷新页面时Rails会返回前端入口文件，vue-router会自动根据当前url匹配对应的子路由，渲染对应页面内容。

内容的提问来源于stack exchange，提问作者Tiktac