Vue命名视图

命名视图 | Vue Router

如果要在

如何要在main区域里使用路由的话，整体区域是Layout，内涵Header和Nav以及Main

        path: '/index',
        name: 'index',
        component: Layout,

若要只修改main区域的话，则取要加上v-if判断，来确实是否显示再那块区域

<!-- layout.vue -->
<template>
  <el-container>
    <el-header height="120px">信息统计系统</el-header>
    <el-container>
      <el-aside width="300px" style="background-color: rgb(238, 241, 246)" class="scrollable-area">
        <!-- 侧边栏 -->
        <slot name="sidebar">
          <menucomp/>
        </slot>
      </el-aside>
      <el-container>
        <el-main class="scrollable-area">
          <!-- 主要内容区域 -->
          <template>
            <router-view v-if="$route.meta.link" />
          </template>
        </el-main>
      </el-container>
    </el-container>
    <el-footer>
      <!-- 底部 -->
      <slot name="footer">
        <template >
        </template>
      </slot>
    </el-footer>
  </el-container>

</template>

 {
        path: '/index',
        name: 'index',
        component: Layout,
        children:[{
            path: '/xxxx',
            props:true,
            name: '统计xxxx管理',
            permissions: ['/xxx/xxx'],
            component:xxxxxt,
            meta:{
                link:true
            }
             },
            {
                path: '/xxx',
                name: '数据xxx列表',
                props:true,
                permissions:['xxxx'],
                component:xxxx,
                meta:{
                    link:true
                }
            }

        ]
    },

也可以进行

       <router-view name="main" />，若不写name=“main”，则默认为default

同时对  components进行标识，

 {
        path: '/index',
        name: 'index',
        component: Layout,
        children:[{
            path: '/xxxx',
            props:true,
            name: '统计xxxx管理',
            permissions: ['/xxx/xxx'],
            components:{
                    default:xxxxx,
                    main:xxxxxt
                    },

             },
            {
                path: '/xxx',
                name: '数据xxx列表',
                props:true,
                permissions:['xxxx'],
                components:{main:xxxx},

            }

        ]
    },