ant design官網中文，ant vue 設置中文_ant design vue導航菜單與路由配置操作

此功能包含：

1.根據動態路由自動展開與自動選擇對應路由所在頁面菜單

2.只展開一個子菜單

3.兄弟組件控制菜單與路由

ant design官網中文？:openKeys="openKeys"

:selectedKeys="selectedKeys"

mode="inline"

theme="dark"

:inlineCollapsed="$store.state.isCollapse"

@click='select'

Vuerouter？@openChange='openChange'

>

>{{ item.title }}

>

vue動態路由導航菜單、v-for="subItem in item.submenu"

:key="subItem.index"

:index="subItem.index"

>

{{ subItem.text }}

菜單欄路由配置：

ant design pro官網？{

title: 'Dashboard',

name: '/dashboard',

icon: 'dashboard',

submenu: [

{ text: '分析頁', path: '/dashboard/analysis', index: '/analysis' },

ant design vue？{ 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('/'))],

antd vue、rootSubmenuKeys: ['/dashboard', '/form', '/table', '/user'], // 有幾個子菜單項就貼幾個

功能代碼：

methods: {

openChange (openKeys) { // 只展開一個子菜單

const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)

if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {

ant ui、this.openKeys = openKeys

} else {

this.openKeys = latestOpenKey ? [latestOpenKey] : []

}

},

select ({ item, key, selectedKeys }) { // 選中項

vuetify？this.selectedKeys = [key]

}

},

created () {

this.$bus.$on('goperson', (url) => { // 組件間通信設置菜單欄狀態 此處功能可查看另一篇博客

this.openKeys = [ url.substr(0, url.lastIndexOf('/')) ]

ant vue框架，this.selectedKeys = [ url.substr(url.lastIndexOf('/')) ]

})

}

補充知識：Ant Design Pro 側邊菜單欄 + 路由Router

1、 首先找到 menu.js

{

Ant design html、name: '新添加的表單',

path: 'new-basic-form',

},

添加從30行-33行代碼，然后在你的側邊欄就是多出來一個 “新添加的表單”

但是當你點擊的時候，你會發現右邊 Main 是404，因為我們還需要配置一下router (代表當我點擊“新添加的表單”這個彩蛋的時候，右邊需要顯示的頁面是什么)

2、點擊router.JS 在表單頁下面 children 添加30行-44行

vue路由管理，'/form/new-basic-form': {

component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/newBasicForm')),

},

因為鏈接的是newBasicForm 就需要創建一個newBasicForm.JS

在routes——》Forms——》下創建newBasicForm.js

newBasicForm.js里面的代碼為：

vue antdesign？import React, { PureComponent } from 'react';

import { connect } from 'dva';

import {

Form,

Input,

DatePicker,

ant design vue教程。Select,

Button,

Card,

InputNumber,

Radio,

Icon,

antdesignvue列表編輯。Checkbox,

Tooltip,

} from 'antd';

import PageHeaderLayout from '../../layouts/PageHeaderLayout';

import styles from './style.less';

const FormItem = Form.Item;

antdesign原型設計，@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="表單頁用于向用戶收集或驗證信息，基礎表單常見于數據項較少的表單場景。"

>

你好我叫劉國富

{getFieldDecorator('title', {

rules: [

{

required: true,

message: '請輸入標題',

},

],

})()}

);

}

}

當點擊新添加的表單，右邊則顯示為：你好我叫劉國富。

以上這篇ant design vue導航菜單與路由配置操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持隨便開發網。