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

[php]
https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.js
[/php]

HTML Part index.html
[php]

[/php]

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

VueRouter mount Apps
[php]
var myapp = new Vue({
router,
data: {
…
….
}
}).$mount(‘#myapp’);
[/php]

Syntax of the vuejs Routers
[php]
const NotFound = { template: ‘

Page not found

‘ }
const Home = { template: ‘

My First home page

‘ }
const About = { template: ‘

Information about page

‘ }

/* 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) }
})
[/php]

Full Example of Vuejs Routers

index.html
[php]

• {{ student.name }}
  View Details

https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js
https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.js

[/php]

script.js
[php]
// 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":"http://infinityknow.com/","age":20,"eyeColor":"green","name":"Hope rahul","company":"ZORK","email":"hopedennis@zork.com","address":"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 Record”},{“index”:1,”guid”:”997845545521255″,”picture”:”http://infinityknow.com/”,”age”:24,”eyeColor”:”blue”,”name”:”mayur Kidd”,”company”:”tata”,”email”:”mayur@dhameliya.com”,”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”:”http://infinityknow.com/”,”age”:26,”eyeColor”:”brown”,”name”:”hitesh Camacho”,”company”:”dhameliya”,”email”:”hitesh@techmania.com”,”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”:”http://infinityknow.com/”,”age”:35,”eyeColor”:”green”,”name”:”Avery Mckenzie”,”company”:”QUOTEZART”,”email”:”averymckenzie@quotezart.com”,”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”:”http://infinityknow.com/”,”age”:27,”eyeColor”:”blue”,”name”:”Clements Mckee”,”company”:”GEOFORMA”,”email”:”clementsmckee@geoforma.com”,”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”:”http://infinityknow.com/”,”age”:28,”eyeColor”:”brown”,”name”:”Mcdaniel Justice”,”company”:”QUILCH”,”email”:”angularjs@quilch.com”,”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’);
[/php]

READ :  Angularjs Loading Progress Bar percentage spinner

Demo Example

No related posts.