What Is VueJs 2 Routing? How to Achieve?

What Is VueJs Routing? How to achieve it?

There is no any built-in features for router but we will achieve using below -

<script src="https://unpkg.com/vue@2.5.5/dist/vue.js"></script>

<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>

Install the vue-router using command –

npm  install vue-router

Using Repository from GitHub –

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router

cd node_modules/vue-router

npm install

npm run build

What Is VueJs?

The Vue.js is a progressive JavaScript framework and used to building the interactive user interfaces and also it’s focused on the view layer only (front end).

The Vue.js is easy to integrate with other libraries and others existing projects. Vue.js is very popular for Single Page Applications developments.

The Vue.js is lighter, smaller in size and so faster. It also supports the MVVM (Model-View-ViewModel) pattern.

Example - HTML Code

<script src="https://unpkg.com/vue"></script>

<div id="demo-app">

  <label>Enter name </label>

  <input type="text" v-model="name" id="name" name="name" />

  <h4>My Name is - {{ name }} and my age is - {{ age }} years. </h4>

</div>

VueJs Code –

//Model class

var userModel = {

  id:1,

  name: "Anil Singh",

  age: 24

};

//View Model Class

var userViewModel = new Vue({

  el: '#demo-app',

  data: userModel

});

Result looks here - https://jsfiddle.net/r6hhcvg7/

I hope you are enjoying with this post! Please share with you friends. Thank you!!