Vue-router 第4节 单页面多路由区域操作
第4节 单页面多路由区域操作
按照vuecli第一节的方法创建另一个项目vuerouterTest，初始化好后能看到：
这节课讲的实际需求是，在一个页面有2个以上的<router-view>区域，我们通过配置路由的js文件，来操作这些区域的内容。例如我们在src/App.vue里加上两个<router-view>标签。我们用vue-cli建立了新的项目，并打开了src目录下的App.vue文件，在<router-view>下面新写了两行<router-view>标签,并加入了些CSS样式。
<router-view/>
<router-view name="left" style="float:left;50%;background-color:#ccc;height:300px;"/>
<router-view name="right" style="float:right;50%;background-color:#c0c;height:300px;"/>
现在的页面中有了三个<router-view>标签，也就是说我们需要在路由里配置这三个区域，配置主要是在components字段里进行。
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
components: {
default:HelloWorld,
left:Hi1,
right:Hi2
}
},
{
path: '/Hi',
name: 'HelloWorld',
components: {
default:HelloWorld,
left:Hi2,
right:Hi1
}
}
]
})
上边的代码我们编写了两个路径，一个是默认的‘/’，另一个是’/Hi’。在两个路径下的components里面，我们对三个区域都定义了显示内容。 定义好后，我们需要在component文件夹下，新建Hi1.vue和Hi2.vue页面就可以了。
Hi1.vue：
<template>
<h2>{{msg}}</h2>
</template>
<script>
export default {
data(){
return{
msg:'I am Hi1'
}
}
}
</script>
Hi2.vue
<template>
<h2>{{msg}}</h2>
</template>
<script>
export default {
data(){
return{
msg:'I am Hi2'
}
}
}
</script>
我们看一下效果：
（默认页面就是首页的效果）
