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就行了

Logo

前往低代码交流专区

更多推荐