Using vue-router in Vue.js

January 18, 2018

You can learn how to use routing in single page application development with Vue.js. We are going to use vue-router package

First, you can install the vue-router

npm install vue-router --save

Now you can create the ProductTable.vue and add the following code to it





Next you can add following code to App.vue file




Finally, you can add following code to the main.js file

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import ProductTable from './ProductTable.vue'

Vue.use(VueRouter)

const routes= [
    {
      path: '/products',
      name: 'products',
      component: ProductTable
    }
  ]

const router = new VueRouter({
	routes
});

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})