2021. 5. 20.

vue js Using router : basic (2.x) vuejs 라우터 사용하기 기본


//---------------------------------
// router.js
// define routes and import components
//----------------------------------
import Login from '../components/Login'
import Home from '../components/Home'

export default [{
name:'login',
path:'/login',
component:Login
},
{
name: 'root',
path: '/',
redirect: 'Home'
},
{
name: 'Home',
path: '/home',
component: Home
},
]

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

let router = new VueRouter( //instancing router
{
mode: 'history', //set history mode
routes: Routes // set routes
});

//!! important!! use() method is enable
// to use 'route-view,route-link in template of compoent.
Vue.use(VueRouter)
new Vue({
router,
render: h => h(App),
}).$mount('#app')