Vue-router 第4节 单页面多路由区域操作

---

目录

• Vue-router 第4节 单页面多路由区域操作
  • 第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;width:50%;background-color:#ccc;height:300px;"/>
<router-view name="right" style="float:right;width: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>

我们看一下效果：
（默认页面就是首页的效果）

http://localhost:8080/#/Hi页面：