how to add vue router to existing project

//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 /* <template> <v-app> <v-content> <router-view></router-view> </v-content> </v-app> </template> */ //route.js - We need to craate file under src import linkName from './components/fileName.vue'; export const routes = [ { path: '/', component: linkName } ]

router configuration vue

npm install --save vue-router

//after installing vue-router in the project
//go inside main.js in your project and add
//(just after Vue.config.productionTip=false):

Vue.use(VueRouter):

const routes=[
{path: '/home', component: [componentName]},
{path: '/features', component: [componentName2]},
.
.
.
];
//you can add  as many routes as you need

//also add:

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


//to make the router accesible for all the project you need to add it inside the new Vue:

new Vue({
router,     <----
.
.
}).$mount('#app')

//to make different pages acoording to the route selected, add (inside app.vue):
<template>
   <div id="app">
     <Navbar></Navbar>

     <router-view> </router-view>  <----------
     <Footer></Footer>
   </div>
</template>

Posted by: Guest on October-31-2020

Code answers related to "how to add vue router to existing project"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Answers for "how to add vue router to existing project"

Code answers related to "how to add vue router to existing project"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us