Tagged: vue router tutorial

VueJS Routing and Templating example 0

VueJS Routing and Templating example

VueJS Routing and Templating example

In this Post We Will Explain About is VueJS Routing and Templating example With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Getting Started VueJS – Creating Routes With Vue-Router Example

In this post we will show you Best way to implement Vue.js Routing With vue-router in template, hear for Getting Started With Vue Router and Templating with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Vuejs Direct Download from CDN

The latest version of vue-router is available at Direct Download from CDN

Using NPM Vuejs Install

npm  install vue-router

Include External Libs


index.html

<div id="liveApp">
  /Contact
  /About
  
</div>

index.js

const Contact = { template: '<div>Contact</div>' }
const About = { template: '<div>About</div>' }

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

new Vue({
	router,
  el: '#liveApp',
  data: {
    msg: 'Welcome to Pakainfo.com - Good Morning Hello World'
  }
})

VueJS – Routing Example

   
      <title>Simple VueJs Instance Example</title>
      
      
   
   
      <div id="liveApp">
         <h1>Routing Example</h1>
         <p>
            Home Link 1
            About Link 2
         </p>
         
      </div>
      
         const Home = { template: '<div style="background-color:cyan;width:250px;height:50px;margin:15px;font-size:25px;padding:15px">Welcome - This is Home 1</div>' }
         const About = { template: '<div style="background-color:green;width:250px;height:50px;margin:15px;font-size:25px;padding:15px">Welcome - This is About 2</div>' }
         const routes = [
            { path: '/home', component: Home },
            { path: '/about', component: About }
         ];
         const router = new VueRouter({
            routes 
         });
         var vm = new Vue({
            el: '#liveApp',
            router
         });
      
   

VueJS Routing and Templating

Example

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

I hope you have Got What is Introduction to Routing in Vue.js with vue-router And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.