6.App.vue配置

1.修改<div id="app">指定动态路由，可以设置导航栏

 <div id="app">
 <!-- 导航栏 -->
       	<nav-header></nav-header>
       	<!-- 清除缓存 -->
       	<keep-alive :include="include">
       		<router-view />
   	</keep-alive>
  </div>
引入导航栏
<script>
import navHeader from "@/components/header";
export default {
  data() {
    return {
      include: []
    };
  },
  components: {
    navHeader
  }
};
</script>

2.在components组件目录下新建header目录，目录下新建index.vue，编写导航栏代码

<template>
 <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理1</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理2</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理3</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿4</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'second'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

3.参考第四步的Router路由设置

pages的转到pages的vue
如：
http://dev.yuntu.test.gongsi.com:8083/pages/userGroupDetail/1/1
http://dev.yuntu.test.gongsi.com:8083/pages/userGroupList

4.router对应的配置文件指定映射前端页面

  userGroupList: {
      title: '用户群列表',
      name: 'userGroupList',
      path: '/pages/userGroupList',  			请求
      component: '/Home',					对应的页面Home.vue
      disabled: false
    },

 

5.最好对页面分组，分组里每个页面创建个文件夹，里面放入index.vue

 

如users==》userGroupList==》index.vue&handle.vue&...