1. Babel 과 polyfill 사용
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.10.4/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
</head>
<body>
<div id="app">
<app-header></app-header>
<router-view></router-view>
</div>
</body>
<script type="text/babel" data-plugins="transform-es2015-modules-umd" data-presets="es2015,stage-2">
var routes = [
{ path: '/', component: httpVueLoader('pages/main.vue')},
{ path: '/page01', component: httpVueLoader('pages/page01.vue')}
];
var router = new VueRouter({
routes : routes
});
var app = new Vue({
router: router,
el: '#app',
components: {
'app-header': httpVueLoader('pages/header.vue')
},
data: {
}
}).$mount('#app');
</script>
2. 메소드 표현방식 ES6 이하 로 선언
<script>
module.exports = {
data: function() {
return {
selectedTab : '1'
}
},
mounted: function(){
this.selectedTab = this.$route.params.id
},
methods: {
changeTab: function(tab) {
this.selectedTab = tab;
},
info: function() {
alert('첫 페이지 입니다.')
}
}
}
</script>