9.嵌套路由

1.添加主路由main

<template>
  <div>
    <!-- 页面布局 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">Aside</el-aside>
      <!-- 页面布局 右边 包括header 和main -->
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main

          <!-- 路由出口 -->
          <!-- 路由匹配到的组件将渲染在这里 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script>
  export default {
    data() {
      return {}
    }
  }
</script>

<style>
</style>

 

1.index.js引入子节点

 

import Vue from 'vue'
import Router from 'vue-router'

//1.引入组件
import HelloWorld from '@/components/HelloWorld'

import user from '../views/user.vue'
import home from '../views/home.vue'
import main from '../views/main.vue'
Vue.use(Router)

//2.定义路由，将路由与组件进行映射

const routes = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  },
  //主路由
  {
     path: '/',
     name:main,
     component: main,
     children: [
       //子路由（不能带/）
       {
         path: 'user',
         name:user,
         component: user,
       },
       {
         path: 'home',
         name:home,
         component: home,
       },

     ]
  },




]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new Router({
  routes // (缩写) 相当于 routes: routes
})


export default router