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


Posted in Javascript onOctober 28, 2020

此功能包含:

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导航菜单与路由配置操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
使用jquery获取网页中图片高度的两种方法
Sep 26 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
分享15个Webpack实用的插件!!!
Mar 31 Javascript
JS实现多功能计算器
Oct 28 #Javascript
JS实现简单贪吃蛇小游戏
Oct 28 #Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 #Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 #Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 #Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 #Javascript
js 实现碰撞检测的示例
Oct 28 #Javascript
You might like
多php服务器实现多session并发运行
2006/10/09 PHP
Cannot modify header information错误解决方法
2008/10/08 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
js如何实现淡入淡出效果
2020/11/18 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中的字典遍历备忘
2015/01/17 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
django模板语法学习之include示例详解
2017/12/17 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
python 正确保留多位小数的实例
2018/07/16 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
团委竞选演讲稿
2014/04/24 职场文书
运动会稿件100字
2014/09/24 职场文书
运动员代表致辞
2015/07/29 职场文书
投资入股协议书
2016/03/22 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers