1.二级菜单无法设置隐藏hidden:true bug fix

2.添加routes.js
9 years ago · 15e90ba9f0
4 changed files with 78 additions and 73 deletions
--- a/index.html
+++ b/index.html
@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>vue element admin</title>
-  </head>
-  <body>
-    <div id="app">
-      
-    </div>
-    <!-- built files will be auto injected -->
-  </body>
+
+<head>
+  <meta charset="utf-8">
+  <title>vue element admin</title>
+</head>
+
+<body>
+  <div id="app">
+
+  </div>
+  <!-- built files will be auto injected -->
+</body>
+
 </html>
--- a/src/main.js
+++ b/src/main.js
@ -8,17 +8,7 @@ import store from './vuex/store'
 import Vuex from 'vuex'
 import NProgress from 'nprogress'//页面顶部进度条
 import 'nprogress/nprogress.css'
-
-import Login from './pages/Login.vue'
-import Home from './pages/Home.vue'
-import Main from './pages/Main.vue'
-import Table from './pages/nav1/Table.vue'
-import Form from './pages/nav1/Form.vue'
-import user from './pages/nav1/user.vue'
-import Page4 from './pages/nav2/Page4.vue'
-import Page5 from './pages/nav2/Page5.vue'
-import Page6 from './pages/nav3/Page6.vue'
-import echarts from './pages/charts/echarts.vue'
+import routes from './routes'

 // start mock
 import Mock from './mock';
@ -30,56 +20,6 @@ Vue.use(Vuex)

 NProgress.configure({ showSpinner: false });

-const routes = [
-  {
-    path: '/login',
-    component: Login,
-    hidden: true//不显示在导航中
-  },
-  //{ path: '/main', component: Main },
-  {
-    path: '/',
-    component: Home,
-    name: '导航一',
-    iconCls: 'el-icon-message',//图标样式class
-    children: [
-      //{ path: '/main', component: Main },
-      { path: '/table', component: Table, name: 'Table' },
-      { path: '/form', component: Form, name: 'Form' },
-      { path: '/user', component: user, name: '列表' },
-    ]
-  },
-  {
-    path: '/',
-    component: Home,
-    name: '导航二',
-    iconCls: 'fa fa-id-card-o',
-    children: [
-      { path: '/page4', component: Page4, name: '页面4' },
-      { path: '/page5', component: Page5, name: '页面5' }
-    ]
-  },
-  {
-    path: '/',
-    component: Home,
-    name: '',
-    iconCls: 'fa fa-address-card',
-    leaf: true,//只有一个节点
-    children: [
-      { path: '/page6', component: Page6, name: '导航三' }
-    ]
-  },
-  {
-    path: '/',
-    component: Home,
-    name: 'Charts',
-    iconCls: 'fa fa-bar-chart',
-    children: [
-      { path: '/echarts', component: echarts, name: 'echarts' }
-    ]
-  }
-]
-
 const router = new VueRouter({
  routes
 })
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@ -45,7 +45,7 @@
 	<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
 		<el-submenu :index="index+''" v-if="!item.leaf">
 			<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
-			<el-menu-item v-for="child in item.children" :index="child.path">{{child.name}}</el-menu-item>
+			<el-menu-item v-for="child in item.children" :index="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
 		</el-submenu>
 		<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
 	</template>
--- a/src/routes.js
+++ b/src/routes.js
@ -0,0 +1,62 @@
+import Login from './pages/Login.vue'
+import Home from './pages/Home.vue'
+import Main from './pages/Main.vue'
+import Table from './pages/nav1/Table.vue'
+import Form from './pages/nav1/Form.vue'
+import user from './pages/nav1/user.vue'
+import Page4 from './pages/nav2/Page4.vue'
+import Page5 from './pages/nav2/Page5.vue'
+import Page6 from './pages/nav3/Page6.vue'
+import echarts from './pages/charts/echarts.vue'
+
+let routes = [
+    {
+        path: '/login',
+        component: Login,
+        hidden: true//不显示在导航中
+    },
+    //{ path: '/main', component: Main },
+    {
+        path: '/',
+        component: Home,
+        name: '导航一',
+        iconCls: 'el-icon-message',//图标样式class
+        children: [
+            //{ path: '/main', component: Main },
+            { path: '/table', component: Table, name: 'Table' },
+            { path: '/form', component: Form, name: 'Form' },
+            { path: '/user', component: user, name: '列表' },
+        ]
+    },
+    {
+        path: '/',
+        component: Home,
+        name: '导航二',
+        iconCls: 'fa fa-id-card-o',
+        children: [
+            { path: '/page4', component: Page4, name: '页面4' },
+            { path: '/page5', component: Page5, name: '页面5' }
+        ]
+    },
+    {
+        path: '/',
+        component: Home,
+        name: '',
+        iconCls: 'fa fa-address-card',
+        leaf: true,//只有一个节点
+        children: [
+            { path: '/page6', component: Page6, name: '导航三' }
+        ]
+    },
+    {
+        path: '/',
+        component: Home,
+        name: 'Charts',
+        iconCls: 'fa fa-bar-chart',
+        children: [
+            { path: '/echarts', component: echarts, name: 'echarts' }
+        ]
+    }
+];
+
+export default routes;