带有 Ruby on Rails 路由的 Vue.js 路由器答案

【问题标题】：Vue.js router with Ruby on Rails routes带有 Ruby on Rails 路由的 Vue.js 路由器
【发布时间】：2019-06-13 16:49:01
【问题描述】：

我目前正在开发一个带有 Ruby on Rails 后端和 Vue.js 前端的应用程序。这是一个单页应用程序。我正在使用 webpacker gem 来构建我的主 JS 文件。

我添加了 vue-router 和几个前端路由。我可以使用<router-link> 进行导航，它可以正确呈现适当的组件。我想不通的是如何设置我的前端路由，以便有人可以直接导航到 URL 而无需点击我的 Rails 路由。

例如，如果我输入 /sample-route，我想点击我的 Vue.js 路由，而不是我的 Rails 路由。我仍然希望能够对我的 Rails 路由进行 API 调用。例如/api/users。

【问题讨论】：

标签： ruby-on-rails vue.js vue-router

【解决方案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

【讨论】：

【解决方案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 route。

编辑：使用全部路由确实会导致 404 出现一些问题。如果用户请求一个不存在的路由，Rails 应用程序仍会向他们发送 Vue 包。要解决这个问题，您需要在 Vue 路由器中添加一些未知的路由处理，以呈现类似 404 页面的内容。

【讨论】：

感谢您的帮助万都。我在下面添加了解决我的问题的方法。
@nflauria 我看到你选择了我建议的所有路线。正如我所提到的，在处理 404 时要小心。如果您尝试访问不存在的路由，请确保您的 Vue 路由器具有备份的 catch all 路由。

【解决方案3】：

还有一种有用的方法也可以处理子路由（在单个 rails 应用中，每个页面都有单独的 vue 应用）：

routes.rb

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: [
    ...
  ]
});

【讨论】：