Vuejs Routing With vue-router Example and Demo
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.
<script src="https://npmcdn.com/vue/dist/vue.js"></script> <script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script> <script src="index.js"></script>
HTML Part
Next, It is Simple Main index that Data contains out vuejs Routing.
<div id="pakaApp"> <router-link to="/">/contact</router-link> <router-link to="/aboutus">/aboutus</router-link> <router-view></router-view> </div>
JavaScript Part
This Data contains Simple index.js scripts.
const Contact = { template: '<div>Contact</div>' }
const AboutUs = { template: '<div>AboutUs</div>' }
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:
<html>
<head>
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="pakaApp">
<router-link to="/">/contact</router-link>
<router-link to="/aboutus">/aboutus</router-link>
<router-view></router-view>
</div>
<script>
const Contact = { template: '<div>Contact</div>' }
const AboutUs = { template: '<div>AboutUs</div>' }
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'
}
})
</script>
</body>
</html>
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!.