Skip to content
  • Home
  • Entertainment
    • 4cgandhi
    • pakainfo
    • Sports
    • Make Money
    • Jobs
  • News
    • Insurance
      • Auto Car Insurance
      • Business Insurance
    • Donate
    • California
  • About Us
  • Contact Us
  • Privacy Policy
  • Site Map
  • Terms

Vuejs Routing Single Page Application vue-router

November 2, 2018 by admin

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: []
});

E-junkie: Sell digital downloads online

E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!

Also see:

  1. The Top 10+ Best Webinar Software Platforms For 2020-2021
  2. Build Your Future Godaddy Careers And Jobs
  3. Introduction To Web Hosting Services

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

READ :  Vue-router - Routing using Vuejs - Dynamic Components in Vuejs
Categories Technology, VueJs Tags laravel vue router, vue router 2 example, vue router cdn, vue router go, vue router link, vue router login, vue router tutorial, vue-router example Leave a comment
Post navigation
Angular location redirect with parameters
Vuejs DataTable Searching Sorting Pagination PHP with MySQL
  • whatismyscreenresolution
  • tamilrockers new link 2019 free download
  • tamilrockers website link
  • tamilrockers new link 2019
  • tamilrockers url
© 2021 InfinityKnow • Powered by GeneratePress
Scroll back to top
↞
↠