Vuejs Routing Single Page Application vue-router

Vuejs Routing Single Page Application vue-router

Today, We want to share with you Vuejs Routing Single Page Application vue-router.
In this post we will show you Vuejs Routing Example with Single Page App vue-router, hear for Vue.js Routing With vue-router we will give you demo and example for implement.
In this post, we will learn about Configuring Vue Router for a Single Page App with an example.

Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.PHP Get ID of Last Inserted RecordImplement single page app routing

Step 1 : Setup the router INCLUDE

<a href="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.js">https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.js</a>

HTML Part index.html

<div id="app" class="top-part">
    
</div>

VueRouter

var router = new VueRouter({
    mode: 'hash',
    base: window.location.href,
    routes: []
});

VueRouter mount Apps

var myapp = new Vue({
    router,
    data: {
        ...
		....
    }
}).$mount('#myapp');

Syntax of the vuejs Routers

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>My First home page</p>' }
const About = { template: '<p>Information about page</p>' }

/* define const varibles*/
const routes = {
  '/': Home,
  '/about': About
}
new Vue({
  el: '#myapps',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

Full Example of Vuejs Routers

index.html

  
  
  <title>Full Example of Vuejs Routers</title>


  <div id="myapp">
    
  </div>
  
  
    <ul>
      <li>
        {{ student.name }} 
        View Details
      </li>
    </ul>
  
  
  
    <div>
      Homepage
      <h1><img> {{ student.name }}</h1>
      <h3>{{ student.company }}</h3>
      <ul>
        <li>student Age: {{ student.age }}</li>
        <li>student Eye Colour: {{ student.eyeColor }}</li>
        <li>student Email: <a>{{ student.email }}</a></li>
      </ul>
      <h4>student Address</h4>
      <p>{{ student.address }}</p>
      <h4>student About Information{{ student.name }}</h4>
      <p>{{ student.about }}</p>
    </div>
  
  
  <a href="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js">https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js</a>
  <a href="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.js">https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.js</a>

script.js

// Listing people component
var PeopleListing = Vue.extend({
  template: '#people-listing-template',
  data: function() {
      return {
        people: this.$parent.people
    }
  }
});

// student detail
var PersonDetail = Vue.extend({
  template: '#people-detail-template',
  data: function() {
    var student;
    for (var i = 0; i < this.$parent.people.length; i++) {
      if(this.$parent.people[i].guid == this.$route.params.id) {
        student = this.$parent.people[i];
        break;
      }
    }
    
    return {
      student: student
    }
  }
});

// simple Create the router
var router = new VueRouter({
	mode: 'hash',
	base: window.location.href,
	routes: [
      {path: '/', component: PeopleListing},
      {name: 'student', path: '/:id', component: PersonDetail }
    ]
});


var myapp = new Vue({
    router,
	data: {
		people: [{"index":0,"guid":"998989885656","picture":"https://infinityknow.com/","age":20,"eyeColor":"green","name":"Hope rahul","company":"ZORK","email":"[email protected]","address":"Welcome to the In <a href="https://infinityknow.com/" target="_blank" title="">infinityknow.com</a> website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.<b>PHP Get ID of Last Inserted Record"},{"index":1,"guid":"997845545521255","picture":"https://infinityknow.com/","age":24,"eyeColor":"blue","name":"mayur Kidd","company":"tata","email":"[email protected]","address":"Hello! I am angular king and infinityknow is my web technologies blog. My specialities are Vuejs,API,angularjs,PHP, API, jQuery,HTML,CSS eCommerce,JS,Laravel, CMS and bespoke web application development."},{"index":2,"guid":"89523356523356","picture":"https://infinityknow.com/","age":26,"eyeColor":"brown","name":"hitesh Camacho","company":"dhameliya","email":"[email protected]","address":"new sagarsoc ring road hckjk, 3244","about":"We are Web Technology Experts and Team who provide you very Important information on Web Development information, Interview Questions and Answers, live project problem solution and their solution and online free tutorials - "infinityknow.com"},{"index":3,"guid":"90985365464542","picture":"https://infinityknow.com/","age":35,"eyeColor":"green","name":"Avery Mckenzie","company":"QUOTEZART","email":"[email protected]","We are Web Technology Experts and Team who provide you very Important information on Web Development information, Interview Questions and Answers, live project problem solution and their solution and online free tutorials - "infinityknow.com"},{"index":4,"guid":"20889cdb-ba5d-4eae-a2e3-78347681d9fa","picture":"https://infinityknow.com/","age":27,"eyeColor":"blue","name":"Clements Mckee","company":"GEOFORMA","email":"[email protected]","address":"778 Kensington Walk, Takilma, Massachusetts, 7235","about":"We are Web Technology Experts and Team who provide you very Important information on Web Development information, Interview Questions and Answers, live project problem solution and their solution and online free tutorials - "infinityknow.com"},{"index":5,"guid":"98523595623565564","picture":"https://infinityknow.com/","age":28,"eyeColor":"brown","name":"Mcdaniel Justice","company":"QUILCH","email":"[email protected]","address":"839 frhul data meshdsg","about":"We are Web Technology Experts and Team who provide you very Important information on Web Development information, Interview Questions and Answers, live project problem solution and their solution and online free tutorials - "infinityknow.com"},{"index":6,"guid":"655efe68-f26c-4f36-a2bd-cbf4d7929b77","We are Web Technology Experts and Team who provide you very Important information on Web Development information, Interview Questions and Answers, live project problem solution and their solution and online free tutorials - "infinityknow.com"}]
	}
}).$mount('#myapp');

Demo Example