import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const first = {
template: '<div>first内容</div>'
}
const second = {
template: '<div>second内容</div>'
}
const home = {
template: '<div>home内容</div>'
}
const hehe = {
template: '<div>hehe内容</div>'
}
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [{
path: '/',
components: {
default: home,
left: first
}
}, {
path: '/first',
components: {
default: hehe,
right: second
}
}]
})
new Vue({
router,
template: `
<div id="r">
<h1>导航</h1>
<p>{{$route.name}}</p>
<ol>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/first">/first</router-link></li>
</ol>
<router-view class="sade"></router-view>
<router-view class="sade1" name="left" style="float: left; height: 200px;width: 41%; backgroundColor: #ff6600;"></router-view>
<router-view class="sade2" name="right" style="float: right; height: 200px;width: 41%; backgroundColor: #ff9900;"></router-view>
</div>
`
}).$mount('#app')