首页 >> js开发 >> jsant design vue导航菜单与路由配置操作js大全
jsant design vue导航菜单与路由配置操作js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
此功能包含:此功能包含:1.根据动态路由自动展开与自动选择对应路由所在页面菜单2.只展开一个子菜单3.兄弟组件控制菜单与路由
:openKeys="openKeys"
:selectedKeys="selectedKeys"
mode="inline"
theme="dark"
:inlineCollapsed="$store.state.isCollapse"
@click='select'
@openChange='openChange'
>
>{{ item.title }}>
v-for="subItem in item.submenu"
:key="subItem.index"
:index="subItem.index"
>
{{ subItem.text }}
:openKeys="openKeys"
:selectedKeys="selectedKeys"
mode="inline"
theme="dark"
:inlineCollapsed="$store.state.isCollapse"
@click='select'
@openChange='openChange'
>
>{{ item.title }}>
v-for="subItem in item.submenu"
:key="subItem.index"
:index="subItem.index"
>
{{ subItem.text }}
菜单栏路由配置:菜单栏路由配置:
{
title: 'Dashboard',
name: '/dashboard',
icon: 'dashboard',
submenu: [
{ text: '分析页', path: '/dashboard/analysis', index: '/analysis' },
{ text: '监控页', path: '/dashboard/monitor', index: '/monitor' }
]
}
{
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'], // 有几个子菜单项就贴几个
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('/')) ]
})
}
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补充知识:补充知识:Ant Design Pro 侧边菜单栏 + 路由Router1、 首先找到 menu.js
{
name: '新添加的表单',
path: 'new-basic-form',
},
{
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')),
},
'/form/new-basic-form': {
component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/newBasicForm')),
},因为链接的是newBasicForm 就需要创建一个newBasicForm.JS在routes——》Forms——》下创建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 (
//
这个个组件 自带头
title="new-基础表单"
content="表单页用于向用户收集或验证信息,基础表单常见于数据项较少的表单场景。"
>
);
}
}
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 (
//
这个个组件 自带头
title="new-基础表单"
content="表单页用于向用户收集或验证信息,基础表单常见于数据项较少的表单场景。"
>
);
}
}
当点击新添加的表单,右边则显示为:你好我叫刘国富。以上这篇ant design vue导航菜单与路由配置操作就是小编分享给大家的全部内容了,希望能给大家一个参考。
:openKeys="openKeys"
:selectedKeys="selectedKeys"
mode="inline"
theme="dark"
:inlineCollapsed="$store.state.isCollapse"
@click='select'
@openChange='openChange'
>
>{{ item.title }}>
v-for="subItem in item.submenu"
:key="subItem.index"
:index="subItem.index"
>
{{ subItem.text }}
:openKeys="openKeys"
:selectedKeys="selectedKeys"
mode="inline"
theme="dark"
:inlineCollapsed="$store.state.isCollapse"
@click='select'
@openChange='openChange'
>
>{{ item.title }}>
v-for="subItem in item.submenu"
:key="subItem.index"
:index="subItem.index"
>
{{ subItem.text }}
菜单栏路由配置:菜单栏路由配置:
{
title: 'Dashboard',
name: '/dashboard',
icon: 'dashboard',
submenu: [
{ text: '分析页', path: '/dashboard/analysis', index: '/analysis' },
{ text: '监控页', path: '/dashboard/monitor', index: '/monitor' }
]
}
{
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'], // 有几个子菜单项就贴几个
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('/')) ]
})
}
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补充知识:补充知识:Ant Design Pro 侧边菜单栏 + 路由Router1、 首先找到 menu.js
{
name: '新添加的表单',
path: 'new-basic-form',
},
{
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')),
},
'/form/new-basic-form': {
component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/newBasicForm')),
},因为链接的是newBasicForm 就需要创建一个newBasicForm.JS在routes——》Forms——》下创建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 (
//
这个个组件 自带头
title="new-基础表单"
content="表单页用于向用户收集或验证信息,基础表单常见于数据项较少的表单场景。"
>
你好我叫刘国富
);
}
}
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 (
//
这个个组件 自带头
title="new-基础表单"
content="表单页用于向用户收集或验证信息,基础表单常见于数据项较少的表单场景。"
>
你好我叫刘国富
);
}
}
当点击新添加的表单,右边则显示为:你好我叫刘国富。以上这篇ant design vue导航菜单与路由配置操作就是小编分享给大家的全部内容了,希望能给大家一个参考。
相关文章:
- js解决vue项目中出现Invalid Host header的问题js大全
- JavaScriptNode.js文本文件BOM头的去除方法
- jsVue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例js大全
- js微信小程序实现多张图片上传功能js大全
- js深入了解Vue3模板编译原理js大全
- jsvue实现下载文件流完整前后端代码js大全
- js解决vue elementUI 使用el-select 时 change事件的触发问题js大全
- jsVue项目利用axios请求接口下载exceljs大全
- js代码关于JavaScript中异步/等待的用法与理解
- js微信小程序实现日历小功能js大全