In this article we will go through the basics of routing using vue-Router.
Vue Router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze.
Features include:
- Nested route/view mapping
Modular, component-based router configuration
Route params, query, wildcards
View transition effects powered by Vue.js' transition system
- Fine-grained navigation control
- Links with automatic active CSS classes
- HTML5 history mode or hash mode, with auto-fallback in IE9
- Customizable Scroll Behavior
I have prepared a repo for the starter files for you here project here.
First things first we need to create a fresh vueJs project. We can use “vue create ” in this case the name of our project will be kenyavuejs. We can as well use the “vue ui” command to create the project.
After creating the project, let us change into the project root directory. After that let us run the command “npm run serve” which will server our application and we will be able to view it into our browser.
Another beautiful feature that ships with vueJs is the hot reload. It provides us with the updated version of our application in the browser anytime we edit and save our components changes.
We now need to create some components that we will be routing to. In our case we are going to create four routes mainly home, about,service and missing components. The missing component will display for routes not configured within our application.
Enough of that now let us jump into the coding part.
Main.js file
Well this is the ‘main’ file that will contain all our files
First we import the vue-router that we installed already. You can install it by running “npm install vue-router” if you haven’t already.
import VueRouter from 'vue-router';
Now let us instantiate the vue-router instance into our application as shown below.
//instantiate the vue-router to be used in our application
Vue.use(VueRouter);
import Vue from 'vue'
import Routes from './routes';
// import { component } from 'vue/types/umd';
import App from './App.vue'
//import vuerouter into out application
import VueRouter from 'vue-router';
//instantiate the vuerouter into our application
Vue.use(VueRouter);
const router = new VueRouter({
routes:Routes,
//prevent the default # hashing in the browser url
mode:'history'
})
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router,
}).$mount('#app')
Setting Up Our Components
In our components folder we will create four vue components. We will have home component, about, services and Missing components.
Home.vue
Our home folder will have the following simple structure.
<template>
<div>
<p>Home Route Component</p>
</div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
p{
padding-top: 20px;
text-align: center;
font-size: 20px;
}
</style>
About.vue
This will contain the about component section.
<template>
<div>
<p>About Us Route Component</p>
</div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
p{
padding-top: 20px;
text-align: center;
font-size: 20px;
}
</style>
Services.vue
This will contain the rvices section components
<template>
<div>
<p>Services Route Component</p>
</div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
p{
padding-top: 40px;
text-align: center;
font-size: 20px;
}
</style>
Missing/Error component
This component will show up for the routes that are not configured within our application.
<template>
<div>
<p>This page is not available</p>
</div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
p{
padding-top: 40px;
text-align: center;
font-size: 20px;
}
</style>
Let’s take for instance the user/client tries to navigate to the route /user. This route is not available and not configured in our application. Instead this component will be served for routes that are not available and not configured in our application.
Setting Up the Routes
This is where we will handle our routing configuration with their corresponding paths.
Our routes.js file:
First we need to import the components and then create their respective paths. After which we will need to export the file to be available for use in our main.js file to handle the routing.
// we import the components here
import Home from './components/Home.vue';
import About from './components/About.vue';
import Services from './components/Services.vue';
import Missing from './components/Error404.vue';
//define the respective paths with their components
export default[
{ path:'/', component: Home},
{ path:'/About', component: About},
{ path:'/Services', component: Services},
{ path:'*', component: Missing}
]
For the path we have as a star * is for routes that are not configured in our application and always throws the error 404.
Best Practices
Create routes in a separate file and export – this will ensure that we maintain clean code and ensure easy maintainability.
Protect Vue Routes with navigation guards – a blog can be found on this %[css-tricks.com/protecting-vue-routes-with-n.. here.
Conclusion
Routing is very important for our applications and VueJs provides an easy to use routing environment for our applications.
Thank you for reading this article if you found it helpful please share and drop your comments down below.
Until next time PEACE.
You can also get in touch from my platforms below:
GitHub
YouTube
LinkedIn %[linkedin.com/in/amjohnphilip]