Introduction to Vue JS Router
Posted By : Manish Nayal | 23-Apr-2021
INTRODUCTION
In this post, I am going to tell you all about the use of Vue Router in Vue JS project which is a very useful library for managing routings in Vue js applications. There are lot more things to discuss about, so let's get started.
Integration:
You can integrate Vue Router in your application in multiple ways and I will start with the easiest one.
1) Direct Download / CDN:
unpkg.com provides npm-based CDN links.
The above link will always point to latest release on npm. You can also use a specific version/tag via URLs like:
In your index.html like this:
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
2) With NPM:
Now, configure your Vue instance to use it.
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
3) With Vue CLI:
If you have a project using Vue CLI you can add Vue Router as a plugin. You can let CLI generate the code above for you as well as two sample routes. It will also overwrite your App.vue, so make sure to backup the file before running the following command inside the project:
After integration work:
Once you've integrated Vue Router in your project you just need to place a tag called <router-view></router-view> and map each path with their specific component. Like so,
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- use router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<!-- `<router-link>` will be rendered as an `<a>` tag by default -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
In your routing config you can define the components this way:
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/contact',
name: 'Contact',
component:Contact
},
{
path:'/coreJava',
name:'Core Java',
component: () => import('../views/CoreJava.vue')
},
{
path:'/blogs',
name:'Blogs',
component:() => import('../views/Blogs.vue')
}
]
That's it for using routes in Vue JS. Now as you visit the path specified it will render the specific component you've mapped.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Manish Nayal
He likes making stuff on the Internet and specialises in designing digital products such as websites and web apps. He is frontend developer having good knowledge of various frontend technologies.