Using Vue as an Angular alternative for Ionic: Routing part 1

The basic routing concepts between an Ionic Vue and an Ionic Angular application are the same.
A list of Routes are declared and they will help us navigate to different Views.

In this tutorial, we will see how to create:

  1. A basic route
  2. A route with parameters
  3. A named route
  4. Some nested views

If  you don’t know how to bootstrap an Ionic Vue application, you should go to the first tutorial of the course.

As usual, we start by adding a new library:

The vue-router plugin is the official Vue router plugin, the equivalent of the @angular/router.

Basic example

We will start with a very basic route and pay tribute to the Ionic’s About section.

We first head to the index.html file:

The router-view Directive will display the content according to the current route, this can be compared to a television.
The router-link helps us navigate to the about view, this is the equivalent of a remote control button.

In order to use those elements, we need to go to the main.ts file where we can link Vue and VueRouter together:

We can now prepare the routing by creating a simple About Component:

This Component has a simple template and two lifecycle hooks. Thanks to the mounted and destroyed hooks, we can see the transition when navigating.

We then create an array for the routes:

So far there’s not much difference between the Ionic Vue and the Ionic Angular routing system.

And we finish the configuration:

A new VueRouter instance is created then used by the Ionic Vue root instance.

Routes can be more complex. Since the REST ascension, we tend to pass more optional information when navigating.
We will take the previous About example and pass a user id.

Routing with params

Going back to the index.html:

The second route has more information: the user’s id.

We will use this information in the About Component from the main.ts file:

The id is acquired from the context’s $route.params.id property in the mounted hook. If the id is not null, we display the optional information.

We update the routes configuration:

The “/:id” part means that an optional id parameter can follow the “/about” part.
Be careful there, if we want to use a more specific route like “/about/create”, it’s necessary to use this configuration:

The router will first check if the route contains “/create”, if not, it will consider that the rest of the route is an id parameter. If we do the opposite, the “/create” part will always be considered an id and we will never reach the “/create” view.
Always list the routes from the more specific to the more generic (and by alphabetical order if possible).
And that’s it, we have our route working!

But wait! That’s not the only way.

We can create a different Contact Component:

This one has an id props and directly get the id from the context.

We only need to specify in the routes configuration that some props are available:

Named routes

Routing can be quite annoying when the paths are quite long. However, thanks to named routes we can use shorter names as aliases, here is an example:

This route’s path is “/black”, but it can be called by using the name “white”!
Here is the associated Component:

And how to use it in the index.html:

We need to use an object here with a name property, hence we need to use :to to interpret the content.

Nested views

Sometimes we can end up with just one little part of the view that requires some changes. Creating one new view for each change can be overkill.

Nested views can be useful and performant in this case. They are like a <ng-switch> coupled with an <ng-include>.
The parent’s content stays the same and the sub-views content are shown according to the current route.

Here is how it’s done:

The Parent Component has a <router-view> Element where its Child Components will be displayed.
We have two Child Components, they are declared in the children property and we navigate between them by using a <router-link> to “/parent/first-child” and “/parent/second-child”.

We can finally add a <router-link> to the parent in our main view:

BONUS CONTENT
Enter your email address in the box below to get access to this tutorial (and others) source code.

Conclusion

Routing is a big part for an Ionic Vue application.
It can be very simple with basic routes, however, the bigger the application gets, the more complex the routing system becomes.
The routes generally follow a functional approach coupled with the REST convention like:

user/:id/delete
about/user/:id/color/:colorId

It’s wiser to take a step back and set some time aside to create a solid routing system. In the next routing tutorial, we will dive into more advanced concepts like lazy loading, dynamic routes, etc.

No Comments Yet

Leave a Reply

Your email address will not be published. Required fields are marked *

0 Shares