APP.VUE
<router-view></router-view>
<router-view name="left"></router-view>
<router-view name="right"></router-view>
ROUTER/INDEX.JS
// 引用模板
import Hi from '../components/Hi.vue'
import Hi1 from '../components/Hi1.vue'
import Hi2 from '../components/Hi2.vue'
// 配置路由
export default [
{
path: '/',
name:'Hi',
components: {
default:Hi,
left:Hi1,
right:Hi2
}
}
]
HI1.VUE
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script type="text/javascript">
export default{
name:'Hi1',
data(){
return{
msg:"i am hi1 page"
}
}
}
</script>
<style type="text/css">
</style>
HI2.VUE
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script type="text/javascript">
export default{
name:'Hi2',
data(){
return{
msg:"i am hi2 page"
}
}
}
</script>
<style type="text/css">
</style>