transition
component enables switching between pages without a full website reload. It works similar to links, but instead of reloading the complete website, including the layout like Rails usually does, it only asynchronously reloads the page without the layout and replaces it dynamically.3.0.0
transitions require a wrapping matestack_vue_js_app
component and a page_switch
component as seen belowid
and class
, the transition component can handle additional parameters:path
expects a path within our application. If you want to route to a link outside our application, use the a
method, rendering a typical HTML a
tagpage_loading_triggered
eventtransition
component automatically gets the active
class on the clientside when the current path equals the target path.transition
component is currently active, the parent transition
component gets the active-child
class. A sub page is recognized if the current path is included in the target path of the parent transition
component:/some_page
/some_page/child_page
--> Parent gets child-active
transition
component automatically emits events on:delay
attributeapp/matestack/example_app/layout.rb
loading
class and your loading state element to implement CSS based loading state effects. It may look like this (scss):<a>
tag and performs a page transitionconfig/routes.rb
) and the corresponding endpoints in our example controller:localhost:3000/my_example_app/page1
and see our two buttons (Page 1
and Page 2
) and the content of page 1 (My Example App Layout
and This is Page 1
).Page 2
-button, we get transferred to our second page (This is Page 2
) without re-loading the whole page.Back to Page 1
), we get transferred back to the first page, again without re-loading the whole page. This behavior can save quite some request payload (and therefore loading time) as only the relevant content on a page gets replaced!