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

首先来看一下路由配置

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指向的组件。

页面代码

<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了