vue + antd 一级,二级路由跳转问题
vue + antd 一级,二级路由跳转问题基本需求如下图(附图)功能如下:(1)(2)主要代码片段:(1)路由 router.js{path: '/person',name: 'person',meta: {title: '人员管理'},component: () => import ('@/views/person/Index.vue'),children: ...
·
vue + antd 一级,二级路由跳转问题
- 基本需求如下图
(附图)功能如下:
(1)
(2)
主要代码片段:
(1)路由 router.js
{
path: '/person',
name: 'person',
meta: {title: '人员管理'},
component: () => import ('@/views/person/Index.vue'),
children: [
{
path: 'person',
name: 'person',
meta: {title: '人员信息列表', type: 'user'},
component: () => import ('@/views/person/item/person.vue')
}
........
]
},
{
path: '/enter',
name: 'enter',
meta: {title: '企业管理'},
component: () => import ('@/views/enter/index.vue'),
children: [
{
path: 'enter',
name: 'enter',
meta: {title: '企业统计', type: 'android-contact'},
component: () => import ('@/views/enter/item/enter.vue')
},
...........
]
}
(2) header.vue 顶部导航
<a-menu
class="headerMenu fl"
mode="horizontal"
@select="menuchange"
:defaultSelectedKeys="[nowPath]"
:style="{ lineHeight: '64px' }"
>
<a-menu-item :key="item.link" v-for="(item) in selectArr">
<div class="selectItemIcon"><img :src="item.src" alt=""></div>
<p class="selectItemName">{{item.name}}</p>
</a-menu-item>
</a-menu>
export default {
data() {
return {
nowPath: '/' + this.$route.path.split('/')[1],
selectArr: [
{
name: '人员管理',
src: person,
link: '/person'
},
{
name: '企业管理',
src: enter,
link: '/enter'
}
]
}
}
}
methods:{
menuchange(event) {
let paths = ''
switch (event.key.split('/')[1]) {
default:
paths = 'person';
break;
case 'person':
paths = 'person';
break;
case 'enter':
paths = 'enter';
break;
}
this.$router.push({ name: paths });
}
}
(2) main.vue
<a-menu
theme="dark"
mode="inline"
:defaultSelectedKeys="[nowPaths]"
style="height: 100%"
@select="getSelected"
>
<a-menu-item :key="item.link" v-for="(item) in menus" style="text-align: center" >
<a-icon style="color: #fff" :type="item.type" />
<span>{{item.name}}</span>
</a-menu-item>
</a-menu>
import headers from './components/header';
import topnav from './components/topNav';
export default {
props: {
menus: {
type: Array,
default: function () {
return []
},
required: true
}
},
data() {
return {
siderWidth: '240',
collapsed: false,
};
},
components: {
headers,
topnav
},
computed: {
nowPaths: function() {
if(this.$route.path.split('/')[2]){
return this.$route.path.split('/')[2]
}
},
memus: function (){
return this.memus
}
},
methods: {
// 左侧导航栏点击时跳转
getSelected(val) {
this.$router.push({ name: val.key });
}
....
},
(3) 页面:
结构:
里面:index.vue 格式为:
<template>
<main-content :menus='menus'></main-content>
</template>
<script>
import mainContent from '../../components/main/main.vue'
import router from '../../router/index'
export default {
data () {
return {
menus: [],
auth: false
}
},
components: {
mainContent
},
methods: {
menufunc (){
this.$router.options.routes.map(item => {
if(item.name === 'person'){
item.children.map(items =>{
if((items.name ==='person') ){
this.menus.push({link:items.name, name: items.meta.title,type:items.meta.type})
}else if(items.name ==='keyPersonList' ) {
this.menus.push({link:items.name, name: items.meta.title,type:items.meta.type})
}
})
}
})
return this.menus
}
},
mounted() {
this.menufunc()
}
}
</script>
只需要把判断条件换成相应的 person enter就行了
更多推荐
已为社区贡献3条内容
所有评论(0)