Vuejs Routing With vue-router Example and Demo

Contents

Today, We want to share with you Vuejs Routing With vue-router Example and Demo.
In this post we will show you Single Page Apps with VueJS Routing and Templating, hear for vue-router 2 template we will give you demo and example for implement.
In this post, we will learn about Introduction to Routing in Vue.js with vue-router with an example.

Vuejs Libraries

We have used CDN for Vuejs and vue JS routing in this Post so you need internet any connection for them to work with demo.

HTML Part

Next, It is Simple Main index that Data contains out vuejs Routing.


  /contact
  /aboutus

JavaScript Part

This Data contains Simple index.js scripts.

const Contact = { template: 'Contact' }
const AboutUs = { template: 'AboutUs' }

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Contact },
    { path: '/aboutus', component: AboutUs }
  ]
})

new Vue({
	router,
  el: '#pakaApp',
  data: {
    msg: 'welcome to Pakainfo.com'
  }
})

index.html Full Example – vue router 2 Example

Create a single page application using vuejs Full example:









  /contact
  /aboutus

We hope you get an idea about Routing in Vue.js with vue-router
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.

Vuejs Routing With vue-router Example and Demo