Router Link Example In VueJs.

 

Router Link is a technique which helps user to switch among the pages without page refresh. It is an important aspect of building single page application(SPA). So in this post we are going to explain how we can create a Router link in VueJs.

Vue router is the official router for vuejs router link. https://vuejs.org/v2/guide/routing.html

So let’s get started our vuejs router link example by installing and creating a new vuejs project.

Below are the steps to create router link in VueJs.

Create New Vue Project.

vue create vuerouter_example

 

Install Vue Router.

npm install vue-router --save

Import the router inside the Vue.js application. So open the src >> main.js file and write the below code.

 

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

 

Create Below Component.

• Home.vue
• About.vue
• Login.vue
• Register.vue

 

Register and import the component inside main.js file.

import Home from './components/Home'
import Aboutus from './components/Aboutus'
import Login from './components/Login'
import Register from './components/Register'
import Details from './components/Details'

const router = new VueRouter({
  mode:'history',
  routes: [
    { path: "/", name: "home",component: Home },

    { path: "/aboutus", name: "aboutus",component: Aboutus },

    { path: "/login",name: "login",component: Login },

    { path: "/register",name: "register",component: Register}  ,

    { path: "/details/:id",name: "details",component: Details} 
    
  ]
})

 

The default mode for Vue-Router  is hash mode. It uses the URL hash to simulate a full URL so that the page won’t be reloaded when the URL changes.

To get rid of the hash, we can use the router’s history mode.

Here, in the above code we have created four route , home is default router , login , register and details route. In details route we are passing one parameter that is id for getting the details by id.

 

Add Below code in App.vue .

<template>
  <div id="app" class="col-sm-12">     
        <!-- <b-nav>    
          <router-link :to="{ name: 'infinite' }" class="nav-link"> <b-button variant="success" active>InfiniteScroll</b-button></router-link>
      </b-nav> -->   
   <b-nav>
     <router-link :to="{ name: 'home' }" class="nav-link">Home</router-link>
     <router-link :to="{ name: 'aboutus' }" class="nav-link">About Us</router-link>
    <router-link :to="{ name: 'login' }" class="nav-link">Login</router-link>
    <router-link :to="{ name: 'register' }" class="nav-link">Register</router-link>
     <router-link :to="{ name: 'details',params:{id:1} }" class="nav-link">Details</router-link>
    
  </b-nav>
  <router-view></router-view>
  </div>
</template>

Write Below code in Home.vue .

<template>  
<div>
    <b-card title="Home">
    <b-card-text>
       Welcome to VueJS Router Link Example.
    </b-card-text>     
  </b-card>    
</div>     
</template>
 

 

Write below code in Aboutus.vue.

<template>  
<div>
   <b-card title="About Us">
    <b-card-text>
      Some quick example text to build on the <em>card title</em> and make up the bulk of the card's
      content.
    </b-card-text>
    <b-card-text>A second paragraph of text in the card.</b-card-text>
  </b-card>
</div>     
</template>
 

Update below code in Login.vue.

<template>  
<div>
     <b-card title="Login">
    <b-form>
     <b-form-group
        id="input-group-1"
        label="Email address:"
        label-for="input-1"
        description="We'll never share your email with anyone else."
      >
        <b-form-input
          id="input-1"          
          type="email"
          placeholder="Enter email"
          required
        ></b-form-input>
      </b-form-group>

      <b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
        <b-form-input
          id="input-2"          
          placeholder="Enter name"
          required
        ></b-form-input>
      </b-form-group>
    <b-button type="submit" variant="primary">Register</b-button>      
    </b-form>    
    </b-card>
</div>     
</template>
 

 

Update below code in Register.vue.

 

<template>  
<div>
      <b-card title="Register">
     <b-form>
     <b-form-group
        id="input-group-1"
        label="Email address:"
        label-for="input-1"
        description="We'll never share your email with anyone else."
      >
        <b-form-input
          id="input-1"          
          type="email"
          placeholder="Enter email"
          required
        ></b-form-input>
      </b-form-group>

      <b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
        <b-form-input
          id="input-2"          
          placeholder="Enter name"
          required
        ></b-form-input>
      </b-form-group>
    <b-button type="submit" variant="primary">Register</b-button>      
    </b-form>    
    </b-card>
</div>     
</template>
 

 

Write below code in Details.vue.

<template>  
<div>
    <b-card title="Details Page">
    <b-card-text>
      ID: {{ $route.params.id }}
    </b-card-text>     
  </b-card>    
</div>     
</template>
 
<script>
export default {
    mounted() {
        console.log(this.$route.params.id);
    }
}
</script>

In the above components I have used Bootstrap Vue. To use Bootstrap Vue follow this link https://bootstrap-vue.org/docs.

 

Redirecting Programmatically in Vue Router.

<template>  
</template> 
<script>
export default {
    mounted() {       
       this.$router.push('/aboutus');
    }
}
</script>

 

Upload File In VueJs With PHP.