Skip to content
InfinityKnow

InfinityKnow

Infinity Knowledge (IK) : Technology, Articles, Topics, Facts or many More.

  • Home
  • Education
    • yttags
    • Make Money
    • Jobs
    • Programming
      • Technology
      • Web Design
      • WEB HOSTING
      • Interview
  • Entertainment
    • pakainfo
    • Sports
    • Tips and Tricks
      • Law
      • Photography
      • Travel
  • Health
    • Insurance
    • Lifestyle
      • Clothing
      • Fashion
      • Food
  • News
    • Insurance
      • Auto Car Insurance
      • Business Insurance
    • Donate
    • California
  • News
    • Political
  • Home Improvement
  • Trading
    • Marketing
    • Top Tranding
    • Business
    • Real Estate
  • Full Form
  • Contact Us
  • facts in hindi Facts
  • CBD
    Buy CBD on account Janar nature – BUY NOW Health
  • AngularJS Cookies Set Get and Remove Cookies
    AngularJS Cookies Set Get and Remove Cookies Technology
  • Long Tights
    Can Long Tights Or Leggings Work Together? Clothing
  • sonar full form – sonar Kya Hai, Meaning and Abbreviation – What is the full form of sonar? full form
  • Angular 6 Interview Questions and Answers
    Angular 6 Interview Questions and Answers Technology
  • Tupac quotes
    Tupac quotes Quotes
  • Page Titles Dynamically Using AngularJS – ng-page-title Example
    Page Titles Dynamically Using AngularJS – ng-page-title Example Technology

Vuejs Routing Single Page Application vue-router

Posted on November 2, 2018 By admin No Comments on 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

[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]

READ :  Vuejs Router pass url parameters Synchronize

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]

Full Example of Vuejs Routers

  • {{ student.name }}
    View Details
Homepage

{{ student.name }}

{{ student.company }}

  • student Age: {{ student.age }}
  • student Eye Colour: {{ student.eyeColor }}
  • student Email: {{ student.email }}

student Address

{{ student.address }}

student About Information{{ student.name }}

{{ student.about }}

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
}
}
});

READ :  AngularJS Custom Directives example - Angular Directives

// 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 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”:”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’);
[/php]

READ :  Vuejs Dynamically Add,Edit And Delete Table row in an Inline Editable Grid

Demo Example

Related posts:

  1. Vuejs Nested Templates and Components using Nested Router
  2. Vue.js Routing With vue-router
  3. Vue-router – Routing using Vuejs – Dynamic Components in Vuejs
  4. Include common header and footer using Vuejs – router-view
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

Post navigation

Previous Post: Angular location redirect with parameters
Next Post: Vuejs DataTable Searching Sorting Pagination PHP with MySQL

Related Posts

  • Angular HTTP POST method request & response Technology
  • AngularJS Session Storage ngStorage
    AngularJS Session Storage ngStorage Technology
  • JavaScript Capitalize First Letter of each sentence
    JavaScript Capitalize First Letter of each sentence Technology
  • Vuejs Introduction Advanced Features Hello World Example Technology
  • custom ng-template Directive using AngularJS Examples
    custom ng-template Directive using AngularJS Examples Technology
  • Angular Dynamic Get JSON Data in PHP MySQLi Technology

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Account web hosting (1)
  • AngularJs (277)
  • Articles (143)
  • Asp.Net (49)
  • Astrology (2)
  • Attorney (7)
  • Auto Car Insurance (4)
  • Biography (2)
  • Business (9)
  • Business Insurance (3)
  • California (4)
  • Choose the web hosting (1)
  • Clothing (6)
  • cloud (8)
  • Cloud data storage (2)
  • Credit (1)
  • Dedicated hosting server web (1)
  • Dedicated server web hosting (1)
  • Dedicated web hosting (1)
  • Degree (11)
  • Design (9)
  • Differences shared hosting (1)
  • Donate (2)
  • Education (37)
  • Energy web hosting (1)
  • Entertainment (6)
  • Facts (12)
  • Fashion (3)
  • Finance (3)
  • Food (5)
  • full form (90)
  • Google Adsense (22)
  • Health (20)
  • Home Improvement (5)
  • Insurance (6)
  • Interview (2)
  • Jobs (6)
  • jquery (2)
  • jQuery (2)
  • Laravel (164)
  • Lawyer (4)
  • Lifestyle (6)
  • Loans (6)
  • Make Money (31)
  • Managed dedicated server (1)
  • Managed hosting solution (1)
  • Managed servers (1)
  • Marketing (8)
  • Mortgage (2)
  • Movies (21)
  • MySQL (180)
  • News (5)
  • Photography (1)
  • PHP (250)
  • Programming (18)
  • Quotes (75)
  • Real Estate (2)
  • SEO (9)
  • Shared web hosting (1)
  • Shayari (67)
  • Sports (5)
  • Status (34)
  • Stories (45)
  • suvichar (8)
  • Tech (3)
  • Technology (675)
  • Tips and Tricks (42)
  • Top Tranding (35)
  • Trading (28)
  • Travel (12)
  • Uncategorized (8)
  • VueJs (179)
  • Web Design (2)
  • WEB HOSTING (1)
  • Web hosting company (1)
  • Web hosting really (1)
  • Web hosting windows (1)
  • Which website hosting (1)
  • Wishes (13)
  • wordpress (15)

Categories

AngularJs (277) Articles (143) Asp.Net (49) Attorney (7) Business (9) Clothing (6) cloud (8) Degree (11) Design (9) Education (37) Entertainment (6) Facts (12) Food (5) full form (90) Google Adsense (22) Health (20) Home Improvement (5) Insurance (6) Jobs (6) Laravel (164) Lifestyle (6) Loans (6) Make Money (31) Marketing (8) Movies (21) MySQL (180) News (5) PHP (250) Programming (18) Quotes (75) SEO (9) Shayari (67) Sports (5) Status (34) Stories (45) suvichar (8) Technology (675) Tips and Tricks (42) Top Tranding (35) Trading (28) Travel (12) Uncategorized (8) VueJs (179) Wishes (13) wordpress (15)
  • Movie4me
    Movie4Me 2021: Download Hollywood Bollywood 300MB Hindi Dubbed Dual Audio Movies Movies
  • qutub minar ki lambai kitni hai – क़ुतुब मीनार की लम्बाई Articles
  • y2mate_app
    Y2mate App: FACEBOOK, INSTAGRAM, YOUTUBE, DOWNLOAD VIDEOS with MP3 and MP4 DOWNLOAD Articles
  • Forehead Lift
    Know More About The Forehead Lift Health
  • Vuejs file upload Ajax formdata component Example
    Vuejs file upload Ajax formdata component Example Technology
  • vuejs http get and post methods PHP MySQLi Technology
  • Adventures of Meesapulimala
    Adventures of Meesapulimala – A walk to remember Articles
  • raksha-bandhan
    short essay on raksha bandhan in hindi Stories

Copyright © 2022 InfinityKnow.

Powered by PressBook News WordPress theme