console
Vue.use(VueRouter);
var router = new VueRouter({
routes: [
{
path: '/page1',
component: {
template: '<p>{{ title }}</p>',
data: function(){
return {
title: 'this is page1'
}
}
}
},
{
path: '/page2',
component: {
template: '<p>{{ title }}</p>',
data: function(){
return {
title: 'this is page2'
}
}
}
},
{
path: '/page3',
component: {
template: '<p>{{ title }}</p>',
data: function(){
return {
title: 'this is page3'
}
}
}
}
]
});
var app = new Vue({
el: '#app',
router,
data: {
msg: 'Hello VUE!'
}
});
<script src="http://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
<script src="http://cdn.bootcss.com/vue-router/2.3.1/vue-router.js"></script>
<div id="app">
<h1>{{ msg }}</h1>
<ul>
<li><router-link to="/page1">page1</router-link></li>
<li><router-link to="/page2">page2</router-link></li>
<li><router-link to="/page3">page3</router-link></li>
</ul>
<router-view></router-view>
</div>