vue add router code example

Example 1: installing vue router & implementation

//Installing Vue Router
npm install vue-router

//Implementation
//main.js - Add below lines
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  routes,
  mode: 'history'
});

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

//App.vue - Add below line in v-content
/*

*/

//route.js - We need to craate file under src
import linkName from './components/fileName.vue';
export const routes = [
  {
    path: '/',
    component: linkName
  }
]

Example 2: add router to vue

vue add router # Vue CLI

Example 3: vue router implementation

//Implementation
//main.js - Add below lines
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  routes,
  mode: 'history'
});

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

//App.vue - Add below line in v-content
/*

*/

//route.js - We need to craate file under src
import linkName from './components/fileName.vue';
export const routes = [
  {
    path: '/',
    component: linkName
  }
]

Example 4: setup vue router

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Tags:

Misc Example