在 Rails 中手动输入路由时无法转到 SPA 页面路由

Question

到目前为止，我做了以下设置：

• 在 Ruby on Rails 7 中创建项目
• 在 rails 的app目录中创建 Vue 项目作为目录
• Vue项目基于：Vue3、Vue-router和Vuex
• 我在 Rails pubic/spa目录中将构建时的 Vue 项目配置为 output，即在 static 文件中提供 SPA 应用程序
• 到目前为止一切顺利，当我运行 Rails 并构建 Vue 项目时，一切都按预期进行
• 当我点击 Vue 页面上的链接时，我预计会转到所需的页面
• 但是，如果我刷新路由页面（例如spa/about ），Rails 会抛出路由错误
• 此外，如果我尝试手动输入路由，我会再次遇到路由错误。

我想我需要一种方法来告诉 Rails 每次路由前缀为spa时始终重定向到 SPA 应用程序

有没有办法配置 rails 来做到这一点？

像这样的东西（在route.rb中）

# every URL prefix is with spa, redirect to static file `spa/index.html`
get "spa#*" => "spa#*"
# or maybe like this?
prefix :spa # there's no `prefix` method option obviously

Answer 1

我通过一些挖掘和测试弄明白了。 以下是配置 Rails 的方法：

1st 用一个动作创建一个 controller

class SpaController < ApplicationController
    def index
        render file: "#{Rails.root}/public/spa/index.html", layout: false
    end
end

带有新控制器的第二个配置route.rb

在route.rb文件中，添加以下行

get 'spa/*path', :to => 'spa#index'

解释

通配符*path用于捕捉任何“动作”，而spa是我一开始所希望的前缀。

例如：

• http://localhost:3000/spa/about
• http://localhost:3000/spa/home

所有这些路由都将重定向到我的SpaController中的相同操作index 。 对于 Vue-router，它知道如何从那里处理路由。

我没有在其他 SPA 框架（例如 Angular）上尝试过相同的解决方案，但我认为该解决方案也可以与它们一起使用。

开心前端程序