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

此功能包含:

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

2.只展开一个子菜单

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



{{ item.title }}


{{ subItem.text }}



菜单栏路由配置:

{
     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导航菜单与路由配置操作_第1张图片

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

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

ant design vue导航菜单与路由配置操作_第2张图片

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

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

ant design vue导航菜单与路由配置操作_第3张图片

'/form/new-basic-form': {
   component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/newBasicForm')),
 },

ant design vue导航菜单与路由配置操作_第4张图片

因为链接的是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 (
    //  这个个组件 自带头
    
    
      

你好我叫刘国富

{getFieldDecorator('title', { rules: [ { required: true, message: '请输入标题', }, ], })()}
); } }

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

ant design vue导航菜单与路由配置操作_第5张图片

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

你可能感兴趣的