Browse Source

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

2.添加routes.js
master
taylor 8 years ago
parent
commit
15e90ba9f0
  1. 25
      index.html
  2. 62
      src/main.js
  3. 2
      src/pages/Home.vue
  4. 62
      src/routes.js

25
index.html

@ -1,13 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<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>
</html>
<head>
<meta charset="utf-8">
<title>vue element admin</title>
</head>
<body>
<div id="app">
</div>
<!-- built files will be auto injected -->
</body>
</html>

62
src/main.js

@ -8,17 +8,7 @@ import store from './vuex/store'
import Vuex from 'vuex' import Vuex from 'vuex'
import NProgress from 'nprogress'//页面顶部进度条 import NProgress from 'nprogress'//页面顶部进度条
import 'nprogress/nprogress.css' 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 // start mock
import Mock from './mock'; import Mock from './mock';
@ -30,56 +20,6 @@ Vue.use(Vuex)
NProgress.configure({ showSpinner: false }); 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({ const router = new VueRouter({
routes routes
}) })

2
src/pages/Home.vue

@ -45,7 +45,7 @@
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden"> <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
<el-submenu :index="index+''" v-if="!item.leaf"> <el-submenu :index="index+''" v-if="!item.leaf">
<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template> <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-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> <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> </template>

62
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;
Loading…
Cancel
Save