我目前正在开发一个具有Ruby on Rails后端和Vue.js前端的应用程序。这是一个单页面应用程序。我正在使用webpacker gem来构建我的主js文件。
我已经添加了vue-router和一些前端路由。我可以使用<router-link>
导航,它可以正确地呈现适当的组件。我不明白的是,我如何设置我的前端路由,这样别人就可以直接导航到一个url,而不会碰到我的rails路由。
例如,如果我输入/sample-route
,我希望进入我的Vue.js路由,而不是rails路由。我仍然希望能够对我的rails路由进行api调用。例如/api/users
。
任何帮助都是非常感谢的。
发布于 2019-06-14 03:19:39
通过在我的主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
发布于 2019-06-14 01:01:39
根据您拥有的路由数量,您可以将您的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页面的内容。
发布于 2020-06-04 23:29:20
还有一种方法很有用,也可以处理子路由(在单个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: [
...
]
});
https://stackoverflow.com/questions/56585212
复制相似问题