使用Ruby on Rails路由的Vue.js路由器

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (28)

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

我添加了vue-router和几个前端路由。我能够使用<router-link>正确的方式渲染适当的组件。我无法弄清楚的是如何设置我的前端路线,以便有人可以直接导航到一个网址,而无需点击我的铁路路线。

例如,如果我输入/sample-route我想要打我的Vue.js路线而不是我的铁路线。我仍然希望能够对我的rails路由进行api调用。例如/api/users

任何帮助表示赞赏。

提问于
用户回答回答于

通过添加<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
用户回答回答于

根据您拥有的路由数量,您可以添加Vue路由routes.rb并将其发送到根Vue应用程序路由。例如,Webpacker使用controller#action渲染你的js包vue_controller#app。您的Vue应用程序路由器使用/user/profile。在routes.rb,添加路线:

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

如果重新定义每个Vue路由似乎无法维护routes.rb,您可能需要查看将其发送到vue app控制器操作的通用回退路由。只要您不更改路由,而只是响应Vue控制器操作,Vue路由器将负责在页面加载时为该路由呈现正确的组件。

在Rails 4中,您可以使用类似SO问题中的答案来帮助您设置“全能”路由Rails catch-all路由

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

扫码关注云+社区

领取腾讯云代金券