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 相关文章推荐
javascript据option的value值快速设定初始的selected选项
Aug 13 Javascript
一个简单的JavaScript数据缓存系统实现代码
Oct 24 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
javascript cookie的简单应用
Feb 24 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
javascript日期比较方法实例分析
Jun 17 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 Javascript
JavaScript实现滚动加载更多
Dec 27 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
How do I change MySQL timezone?
2008/03/26 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
2014/08/07 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
Python中用于计算对数的log()方法
2015/05/15 Python
在Python中使用next()方法操作文件的教程
2015/05/24 Python
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
python list转矩阵的实例讲解
2018/08/04 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
python:动态路由的Flask程序代码
2019/11/22 Python
Python的collections模块真的很好用
2021/03/01 Python
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
如何写一个自定义标签
2012/12/28 面试题
大专自我鉴定范文
2013/10/01 职场文书
函授药学自我鉴定
2014/02/07 职场文书
超市理货员岗位职责
2014/07/04 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
团员年度个人总结
2015/02/26 职场文书
2015年加油站工作总结
2015/05/13 职场文书
务工证明怎么写
2015/06/18 职场文书
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js