[vue] vue-router 사용

작성일자 : 2020.09.07

환경 : Vue 2, vue-router 3.4.3

 

1. vue-rotuer 설치

 

> npm install vue-router or > yarn add vue-router

 

 

 

2. vue-router 설정

 

main.js

import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false // 임시 Component const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // Import Vue Router import VueRouter from 'vue-router'; // 플러그인 형태의 VueRouter 등록 Vue.use(VueRouter); // 라우터 객체 생성 const router = new VueRouter({   mode: history,   routes: [     { path: '/foo', component: Foo },     { path: '/bar', component: Bar }   ] }) new Vue({   render: h => h(App),   router, // 라우터 등록 }).$mount('#app')

 

 

App.vue

<template>   <div id="app">     <!-- 라우팅 링크 -->     <router-link to="foo">foo </router-link>     <router-link to="bar">bar </router-link>     <!-- 컴포넌트가 라우팅 되는 위치  -->     <router-view></router-view>    </div> </template> <script> export default {   name: 'App',   components: {   } } </script> <style>   ... </style>

 

 

 

3. 확인

 

/foo 직접 접근 시 

 

/bar 직접 접근 시

 

foo 링크 클릭 시

 

bar 링크 클릭 시