Adding Routing to a Vue.js cli App
However, if you choose not to install routing when first creating your project (vue create project), and you later change your mind, and then decided to add the vue-router. It could sometime be a pain in the ass, when you try to do the setup manually.
So in this article, I’ll show you how to add Vue.js routers to your existing Vue.js application.
installing the Vue Router.
In your Vue.js src folder, create a router.js file then import Vue and Vue-router:
Import your components (router.js)
We have to configure the routers to make them work. The router method takes an Array of objects which in turn takes each component’s properties: (router.js)
We’re done with router.js , now go to your main.js file and import the vue-router.
In that same main.js file you should see a config like this:
To make the routing work add the router, like this:
In most cases you would’nt have to do this if you started the vue project with the cli and you tick of the vue-router option, but if you did’nt do that then you’ll have to do the setup manually.
Is there anything I missed in this post? Share it with me on twitter