欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ant design vue导航菜单与路由配置操作

程序员文章站 2022-06-26 13:40:15
此功能包含:1.根据动态路由自动展开与自动选择对应路由所在页面菜单2.只展开一个子菜单3.兄弟组件控制菜单与路由

此功能包含:

1.根据动态路由自动展开与自动选择对应路由所在页面菜单

2.只展开一个子菜单

3.兄弟组件控制菜单与路由

<a-menu
:openkeys="openkeys"
:selectedkeys="selectedkeys"
mode="inline"
theme="dark"
:inlinecollapsed="$store.state.iscollapse"
@click='select'
@openchange='openchange'
>
<a-sub-menu v-for="item in menu" :key="item.name" :index="item.title">
<span slot="title"
><a-icon :type="item.icon" /><span>{{ item.title }}</span></span
>
<a-menu-item
v-for="subitem in item.submenu"
:key="subitem.index"
:index="subitem.index"
>
<router-link :to="subitem.path">
{{ subitem.text }}
</router-link>
</a-menu-item>
</a-sub-menu>
</a-menu>

菜单栏路由配置:

{
     title: 'dashboard',
     name: '/dashboard',
     icon: 'dashboard',
     submenu: [
      { text: '分析页', path: '/dashboard/analysis', index: '/analysis' },
      { text: '监控页', path: '/dashboard/monitor', index: '/monitor' }
     ]
    }

默认开启的子菜单及选中项配置

openkeys: [this.$route.path.substr(0, this.$route.path.lastindexof('/'))],
selectedkeys: [this.$route.path.substr(this.$route.path.lastindexof('/'))],
rootsubmenukeys: ['/dashboard', '/form', '/table', '/user'], // 有几个子菜单项就贴几个

功能代码:

methods: {
  openchange (openkeys) { // 只展开一个子菜单
   const latestopenkey = openkeys.find(key => this.openkeys.indexof(key) === -1)
   if (this.rootsubmenukeys.indexof(latestopenkey) === -1) {
    this.openkeys = openkeys
   } else {
    this.openkeys = latestopenkey ? [latestopenkey] : []
   }
  },
  select ({ item, key, selectedkeys }) { // 选中项
   this.selectedkeys = [key]
  }
 },
 created () {
  this.$bus.$on('goperson', (url) => { // 组件间通信设置菜单栏状态 此处功能可查看另一篇博客
   this.openkeys = [ url.substr(0, url.lastindexof('/')) ]
   this.selectedkeys = [ url.substr(url.lastindexof('/')) ]
  })
 }

补充知识:ant design pro 侧边菜单栏 + 路由router

1、 首先找到 menu.js

ant design vue导航菜单与路由配置操作

{
    name: '新添加的表单',
    path: 'new-basic-form',
},

添加从30行-33行代码,然后在你的侧边栏就是多出来一个 “新添加的表单”

ant design vue导航菜单与路由配置操作

但是当你点击的时候,你会发现右边 main 是404,因为我们还需要配置一下router (代表当我点击“新添加的表单”这个彩蛋的时候,右边需要显示的页面是什么)

2、点击router.js 在表单页下面 children 添加30行-44行

ant design vue导航菜单与路由配置操作

'/form/new-basic-form': {
   component: dynamicwrapper(app, ['form'], () => import('../routes/forms/newbasicform')),
 },

ant design vue导航菜单与路由配置操作

因为链接的是newbasicform 就需要创建一个newbasicform.js

在routes——》forms——》下创建newbasicform.js

newbasicform.js里面的代码为:
import react, { purecomponent } from 'react';
import { connect } from 'dva';
import {
 form,
 input,
 datepicker,
 select,
 button,
 card,
 inputnumber,
 radio,
 icon,
 checkbox,
 tooltip,
} from 'antd';
import pageheaderlayout from '../../layouts/pageheaderlayout';
import styles from './style.less';
const formitem = form.item; 

@form.create()
export default class newbasicforms extends purecomponent {
 handlesubmit = e => {
  e.preventdefault();
  this.props.form.validatefieldsandscroll((err, values) => {
   if (!err) {
    this.props.dispatch({
     type: 'form/submitregularform',
     payload: values,
    });
   }
  });
 };

 render() {
  const { getfielddecorator, getfieldvalue } = this.props.form;

  const formitemlayout = {
   labelcol: {
    xs: { span: 24 },
    sm: { span: 7 },
   },
   wrappercol: {
    xs: { span: 24 },
    sm: { span: 12 },
    md: { span: 10 },
   },
  };

   return (
    //  这个个组件 自带头
    <pageheaderlayout
    title="new-基础表单"
    content="表单页用于向用户收集或验证信息,基础表单常见于数据项较少的表单场景。"
    >
    <card bordered={false}>
      <p>你好我叫刘国富</p>
      <form onsubmit={this.handlesubmit} hiderequiredmark style={{ margintop: 8 }}>
      <formitem {...formitemlayout} label="标题">
       {getfielddecorator('title', {
        rules: [
         {
          required: true,
          message: '请输入标题',
         },
        ],
       })(<input placeholder="给目标起个名字" />)}
      </formitem>
      </form>
    </card>
    </pageheaderlayout>

   );
  }
 }

当点击新添加的表单,右边则显示为:你好我叫刘国富。

ant design vue导航菜单与路由配置操作

以上这篇ant design vue导航菜单与路由配置操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。