在 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）上嘗試過相同的解決方案，但我認為該解決方案也可以與它們一起使用。

開心前端程序