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
{ name: '新添加的表单', path: 'new-basic-form', },
添加从30行-33行代码,然后在你的侧边栏就是多出来一个 “新添加的表单”
但是当你点击的时候,你会发现右边 main 是404,因为我们还需要配置一下router (代表当我点击“新添加的表单”这个彩蛋的时候,右边需要显示的页面是什么)
2、点击router.js 在表单页下面 children 添加30行-44行
'/form/new-basic-form': { component: dynamicwrapper(app, ['form'], () => import('../routes/forms/newbasicform')), },
因为链接的是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导航菜单与路由配置操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。