vue element container 子路由

逃离我推掉我的手 2022-10-29 14:29 90阅读 0赞

在`main`container中添加子模块

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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NsYXJvamE_size_16_color_FFFFFF_t_70_pic_center]  
效果  
![在这里插入图片描述][20210215210830236.png_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NsYXJvamE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/69a5b29b31c847d6b51034bd8db7d33c.png
[20210215210830236.png_pic_center]: /images/20221024/f75bf679622d4f52a0c2ebd0461097b1.png