entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://stackoverflow.com/questions/13388715/rails-catch-all-route|blocks|key|44qff|text|根据您拥有的路由数量，您可以将您的Vue路由添加到routes.rb并将它们发送到您的根Vue应用程序路由。例如，Webpacker正在使用controller#action+vue_controller#app呈现您的js包。您的Vue应用程序路由器使用/user/profile。在routes.rb中，添加一条路由：|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|6ttc|get+"/user/profile"+=>+"vue_controller#app"+#+<-+The+controller+action+rendering+your+Vue+pack|114r0|如果在routes.rb中重新定义每个Vue路由似乎是不可维护的，那么您可能希望查看一个通用的后备路由，该路由将它们发送到vue应用程序控制器操作。只要您不更改路由，而只是使用Vue控制器操作进行响应，Vue路由器就会在页面加载时为该路由呈现正确的组件。|38aei|在Rails4中，您可以使用类似于SO问题中的答案来帮助您设置“包罗万象”的路由Rails+catch-all+route。|een9j|编辑:使用catch+all路由确实会导致404出现一些问题。如果用户请求的路由不存在，Rails应用程序仍然会向他们发送Vue包。要解决这个问题，您需要在Vue路由器中添加一些未知的路由处理，以呈现类似于404页面的内容。|80g9o^0|P|9|2G|I|3K|D|3Z|9|0|0|2M|0|3|9|0|14|L|0|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|V|G|@$H|W|I|X|J|K]|$H|Y|I|Z|J|K]|$H|10|I|11|J|K]|$H|12|I|13|J|K]]|L|@]|6|$]]|$A|M|C|N|2|E|F|14|G|@$H|15|I|16|J|K]]|L|@]|6|$]]|$A|O|C|P|2|E|F|17|G|@$H|18|I|19|J|K]]|L|@]|6|$]]|$A|Q|C|R|2|E|F|1A|G|@]|L|@$H|1B|I|1C|A|1D]]|6|$]]|$A|S|C|T|2|E|F|1E|G|@]|L|@]|6|$]]|$A|U|C|-4|2|E|F|1F|G|@]|L|@]|6|$]]]]

Depending on how many routes you have, you can add your Vue routes to <code>routes.rb</code> and send them to your root Vue application route. e.g. Webpacker is rendering your js pack with controller#action <code>vue_controller#app</code>. Your Vue app router uses <code>/user/profile</code>. In <code>routes.rb</code>, add a route:

<code>get "/user/profile" =&gt; "vue_controller#app" # &lt;- The controller action rendering your Vue pack</code>

If it seems unmaintainable to redefine every Vue route in <code>routes.rb</code>, you may want to look into a universal fallback route that sends them to the vue app controller action. As long as you don't change the route, but just respond with the Vue controller action, the Vue router will take care of rendering the right components for that route when the page loads. 

In Rails 4, you can use something like the answers in this SO question to help you out with setting up a "catch-all" route <a href="https://stackoverflow.com/questions/13388715/rails-catch-all-route">Rails catch-all route</a>. 

EDIT: Using a catch all route does lead to some problems with 404's. If the user requests a route that doesn't exist, the Rails app will still send them the Vue pack. To fix this, you would need to add some unknown route handling in your Vue router to render something like a 404 page.

entityMap|blocks|key|cb71m|text|通过在我的主Vue.js组件中添加<router-view></router-vew>，我的问题就解决了。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|45dcj|下面是我的rails路由文件：|eqit6|Rails.application.routes.draw+do
++namespace+:api+do
++++#+api+routes+here
++end

++root+'application#index'
++get+'/*path',+to:+'application#index'+
end|code-block|syntax|javascript|9qs8i^0|H|Q|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|O|9|@$A|P|B|Q|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|R|9|@]|E|@]|F|$]]|$2|I|4|J|6|K|8|S|9|@]|E|@]|F|$L|M]]|$2|N|4|-4|6|7|8|T|9|@]|E|@]|F|$]]]]

My problem was solved by adding <code>&lt;router-view&gt;&lt;/router-vew&gt;</code> into my main Vue.js component. 

Here's my rails routes file as well:

<pre><code>Rails.application.routes.draw do
 namespace :api do
 # api routes here
 end

 root 'application#index'
 get '/*path', to: 'application#index' 
end
</code></pre>

entityMap|blocks|key|7qeqh|text|还有一种方法很有用，也可以处理子路由(在单个rails应用程序中每个页面都有单独的vue应用程序)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|ddn0u|routes.rb|8p65o|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|code-block|syntax|javascript|bpt1d|另外，请根据设计分别处理api和索引路由。|2gm1a|vue-routes.js|2t9d0|const+router+=+new+VueRouter({
++mode:+'history',
++base:+'/page_url',
++routes:+[
++++...
++]
});|9hb23^0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|Q|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|R|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|S|9|@]|A|@]|B|$H|I]]|$2|J|4|K|6|7|8|T|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|U|9|@]|A|@]|B|$]]|$2|N|4|O|6|G|8|V|9|@]|A|@]|B|$H|I]]|$2|P|4|-4|6|7|8|W|9|@]|A|@]|B|$]]]]

There is one more approach which will be useful and handles sub-routes as well (having separate vue apps per page in a single rails app):

routes.rb

<pre><code>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
</code></pre>

Additionally, please handle the api and index routes separately based on the design.

vue-routes.js

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

I'm currently working on a application with a Ruby on Rails backend and Vue.js frontend. It's a single page application. I'm using the webpacker gem to build my main js file.

I've added vue-router and and a couple frontend routes. I'm able to navigate using <code>&lt;router-link&gt;</code> which correctly renders the appropriate component. What I can't figure out is how do I setup my frontend routes so that someone can directly navigate to a url without hitting my rails routes.

For example if I type <code>/sample-route</code> I'd like to hit my Vue.js route and not my rails route. I still want to be able to make api calls to my rails routes as well. For example <code>/api/users</code>.

Any help is appreciated.

Vue.js router with Ruby on Rails routes

路由器

路由

我目前正在开发一个具有Ruby on Rails后端和Vue.js前端的应用程序。这是一个单页面应用程序。我正在使用webpacker gem来构建我的主js文件。 我已经添加了vue-router和一些前端路由。我可以使用<router-link>导航，它可以正确地呈现适当的组件。我不明白的是，我如何设置我的前端路...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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