【Vue】实现单页面多路由（一个页面里面存在多个router-view标签）

首先来看一下路由配置

[code]import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
routes: [
{
path:'/',
redirect:'/home'
},
{
path: '/home',
name: 'HelloWorld',
component: resolve=>require(['../components/Vue06.vue'],resolve),
children:[
{
path:'double',
components: {
default:resolve=>require(['../components/Vue06-a.vue'],resolve),
bottom:resolve=>require(['../components/Vue06-b.vue'],resolve)
}
}
]
}
]
})

想实现多个router-view就要使用components，并在里面配置router-view的name属性对应的组件。default是默认路由，就是不设置路由的router-view都会显示default指向的组件。

页面代码

[code]<template>
<div>
double
<router-view></router-view>
<router-view name="bottom"></router-view>
</div>
</template>

<script>
export default {
name: "Vue06"
}
</script>

<style scoped>

</style>

这样就在一个页面实现多router-view了