Probably you’ve been using routers in the frontend world for a while, but… have you ever written one by yourself? Do you know the foundations of a router? It might seem like it just works, but under the hood a router must take care of several things.
At this point, the router doesn’t work as a Single Page App (SPA) router, since it assigns a new route to
window.location directly, which performs a hard reload.
So far we’ve build the router in a component and a history module within the source code of our app. The problem of it is that the router is tied to the app, specially because the routes are defined within the
That could be improved by moving out the routes from the component and passing them as a parameter. But still, the developer must import the
AppRouter component and the
history.js module and use it around.
We could improve and simplify it by creating a Vue.js plugin, which will make the router 100% reusable between apps and will allow to make it easier to use and customizable for the final developer.
Creating a Vue.js plugin is not something that we need do from scratch: we can create it by using the components and modules that we already have. That means the process to create a plugin could be progressive, you can delay it until you need it. In our case, we have the
AppRouter.vue component and the
history.js module already in place.
Let’s see how we can use them to create a Vue.js plugin for the Router.