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&...