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

页面代码

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