vue element container 子路由

在maincontainer中添加子模块

1.index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home'
import Users from '../components/main/Users'

Vue.use(VueRouter)

const routes = [
  {
    path: '/', // '/'跳转到Home组件
    name: 'Home',
    component: Home, // '/'跳转到Home组件,在APP.vue中给HOme组件留<router-view></router-view>
    children: [{ path: '/users', component: Users }], // '/users'路由既显示Home组件又显示Users子组件
    redirect: '/users' // 通过重定向当访问'/'时自动跳转到包含Users组件的页面
  }
]

const router = new VueRouter({
  routes
})

export default router

1.Home.vue

<template>
    <el-container class="home-container">
      <el-header>Header</el-header>
      <el-container>
        <el-aside>aside</el-aside>
        <el-main>
          main
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</template>

<script>
export default {
  name: 'Home'
}
</script>
<style scoped>

</style>

3.Users.vue

<template>
    <p>main子组件</p>
</template>

<script>
export default {
  name: 'Users'
}
</script>

<style scoped>

</style>

效果