帶有 Ruby on Rails 路由的 Vue.js 路由器

Question

我目前正在開發一個帶有 Ruby on Rails 后端和 Vue.js 前端的應用程序。 這是一個單頁應用程序。 我正在使用 webpacker gem 來構建我的主要 js 文件。

我添加了 vue-router 和幾個前端路由。 我可以使用<router-link>進行導航，它可以正確呈現適當的組件。 我無法弄清楚的是如何設置我的前端路由，以便有人可以直接導航到一個 url 而不會碰到我的 rails 路由。

例如，如果我輸入/sample-route我想點擊我的 Vue.js 路線而不是我的 rails 路線。 我仍然希望能夠對我的 rails 路由進行 api 調用。 例如/api/users 。

任何幫助表示贊賞。

Answer 1

通過將<router-view></router-vew>到我的主要 Vue.js 組件中，我的問題得到了解決。

這也是我的 rails 路由文件：

Rails.application.routes.draw do
  namespace :api do
    # api routes here
  end

  root 'application#index'
  get '/*path', to: 'application#index' 
end

Answer 2

根據你有多少路由，你可以將你的 Vue 路由添加到routes.rb並將它們發送到你的根 Vue 應用程序路由。 例如，Webpacker 正在使用 controller#action vue_controller#app渲染您的 js 包。 您的 Vue 應用路由器使用/user/profile 。 在routes.rb ，添加一個路由：

get "/user/profile" => "vue_controller#app" # <- The controller action rendering your Vue pack

如果在routes.rb重新定義每個 Vue 路由似乎無法維護，您可能需要查看一個通用回退路由，將它們發送到 vue 應用程序控制器操作。 只要您不更改路由，而只是響應 Vue 控制器操作，Vue 路由器就會在頁面加載時負責為該路由渲染正確的組件。

在 Rails 4 中，您可以使用類似於此 SO 問題中的答案的內容來幫助您設置“全能”路線Rails 全能路線。

編輯：使用 catch all 路由確實會導致 404 的一些問題。 如果用戶請求的路由不存在，Rails 應用程序仍會向他們發送 Vue 包。 要解決此問題，您需要在 Vue 路由器中添加一些未知路由處理以呈現類似 404 頁面的內容。

Answer 3

還有一種方法會很有用並且也可以處理子路由（在單個 rails 應用程序中每頁都有單獨的 vue 應用程序）：

路由文件

Rails.application.routes.draw do
    # this route entry will take care of forwarding all the page/* urls to the index
    get 'page_controller/*path', to: 'page_controller#index', format: false
end

另外，請根據設計分別處理 api 和 index 路由。

vue-routes.js

const router = new VueRouter({
  mode: 'history',
  base: '/page_url',
  routes: [
    ...
  ]
});