Using vue-router in Vue.js

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)
})