1.导航栏为单独一个组件

在element-ui中引入导航栏的代码

！注意 内容一定要在template中，否则bug遇到很久

<template>
  <div>
    <!-- 页面布局 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
            <CommonAside />
      </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>
  import CommonAside from '@/components/CommonAside';
  export default {
    data() {
      return {}
    },
    components: {
       CommonAside
    }
}
</script>

<style>
</style>

 2.在main.vue中引入CommonAside组件

 

 注意：import一定要写在script中 否则无法引入成功，显示CommonAside not defined

<template>
  <div>
    <!-- 页面布局 -->
    <el-container>
      <!-- 侧边a栏 -->
      <el-aside width="200px">
            <CommonAside />
      </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>
  import CommonAside from '@/components/CommonAside';
  export default {
    data() {
      return {}
    },
    components: {
       CommonAside
    }
}
</script>

<style>
</style>

3.路由中的路径，导航栏的main为母版，相当于，其他的页面都在该路径的子路径下，导航栏才能在每次页面的跳转时固定不动

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'

import CommonAside from '../components/CommonAside'
Vue.use(Router)

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

const routes = [
  //主路由
  {
     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