How to use Vue Router for navigation?

Install Vue Router and define routes:

// main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

new Vue({
  render: h => h(App),
  router
}).$mount('#app');

 

Use router-link for navigation:

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

 

Post your Answer