The application history in this example has the following path: The following is an example of linear routing in a mobile app: Linear routing means that you can move forward or backward through the application history by pushing and popping pages. If you have built a web app that uses routing, you likely have used linear routing before. Linear Routing versus Non-Linear Routing Linear Routing This will result in the DetailPage component no longer being part of the chunk that is requested on application load. Here, we have the same setup as before only this time DetailPage has been replaced with an import call. Instead, we can set up our routes so that components are loaded as they are needed: The current way our routes are setup makes it so they are included in the same initial chunk when loading the app, which is not always ideal. See Linear Routing versus Non-Linear Routing for more information. This means that router.go() should not be used in applications that make use of non-linear routing. If you then called router.go(2), you would be brought to /pageC.Ī key characteristic of router.go() is that it expects your application history to be linear. If you were to call router.go(-2) on /pageC, you would be brought back to /pageA. Say you have the following application history: Vue Router has a router.go method that allows developers to move forward or backward through the application history. See the useIonRouter documentation for more details as well as type information. UseIonRouter uses the Vue inject() function and should only be used inside of your setup() function. See the Animations documentation for more information on using animations in Ionic Vue.
The AnimationBuilder type is a function that returns an Ionic Animation instance. The router-animation attribute accepts an AnimationBuilder function and is used to provide a custom page transition that is only used when clicking the component it is provided on. The router-direction attribute accepts values of forward, back, or none and is used to control the direction of the page transition. For additional control, the router-direction and router-animation attributes can be set as well. The router-link attribute accepts string values as well as named routes, just like router.push from Vue Router. The router-link attribute can be set on any Ionic Vue component, and the router will navigate to the route specified when the component is clicked. Import from īoth options provide the same navigation mechanism, just fitting different use cases. router.push( ' /detail ' ) " > Go to detail
When you visit "/home", the route renders the HomePage component. Here is a sample routing configuration that defines a single route to the "/home" URL. As a result, we recommend relying on Vue Router features as much as possible rather than trying to build your own routing solutions. Your observation would be correct! Ionic Vue leverages the best parts of Vue Router to make the transition to building apps with Ionic Framework as seamless as possible. While reading this guide, you may notice that most of these concepts are very similar to the concepts found in Vue Router without Ionic Framework. Let's take a look at the basics of an Ionic Vue app and how routing works with it. With Ionic and Vue Router, you can create multi-page apps with rich page transitions.Įverything you know about routing using Vue Router carries over into Ionic Vue. The IonRouterOutlet component uses the popular Vue Router library under the hood. This guide covers how routing works in an app built with Ionic and Vue.
0 kommentar(er)
