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

原文：https://blog.csdn.net/weixin_39370093/article/details/99693739

首先来看一下路由配置

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了