问具有Ruby on Rails路由的Vue.js路由器

EN

通过在我的主Vue.js组件中添加<router-view></router-vew>，我的问题就解决了。

下面是我的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 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路由器就会在页面加载时为该路由呈现正确的组件。

在Rails4中，您可以使用类似于SO问题中的答案来帮助您设置“包罗万象”的路由Rails catch-all route。

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

还有一种方法很有用，也可以处理子路由(在单个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和索引路由。

vue-routes.js

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