ant design vue導(dǎo)航菜單與路由配置操作

更新時(shí)間：2020年10月28日 15:36:56 作者：溫九月

這篇文章主要介紹了ant design vue導(dǎo)航菜單與路由配置操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

此功能包含：

1.根據(jù)動(dòng)態(tài)路由自動(dòng)展開與自動(dòng)選擇對(duì)應(yīng)路由所在頁(yè)面菜單

2.只展開一個(gè)子菜單

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: '分析頁(yè)', path: '/dashboard/analysis', index: '/analysis' },
      { text: '監(jiān)控頁(yè)', path: '/dashboard/monitor', index: '/monitor' }
     ]
    }

默認(rèn)開啟的子菜單及選中項(xiàng)配置

openKeys: [this.$route.path.substr(0, this.$route.path.lastIndexOf('/'))],
selectedKeys: [this.$route.path.substr(this.$route.path.lastIndexOf('/'))],
rootSubmenuKeys: ['/dashboard', '/form', '/table', '/user'], // 有幾個(gè)子菜單項(xiàng)就貼幾個(gè)

功能代碼：

methods: {
  openChange (openKeys) { // 只展開一個(gè)子菜單
   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 }) { // 選中項(xiàng)
   this.selectedKeys = [key]
  }
 },
 created () {
  this.$bus.$on('goperson', (url) => { // 組件間通信設(shè)置菜單欄狀態(tài) 此處功能可查看另一篇博客
   this.openKeys = [ url.substr(0, url.lastIndexOf('/')) ]
   this.selectedKeys = [ url.substr(url.lastIndexOf('/')) ]
  })
 }

補(bǔ)充知識(shí)：Ant Design Pro 側(cè)邊菜單欄 + 路由Router

1、首先找到 menu.js

{
    name: '新添加的表單',
    path: 'new-basic-form',
},

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

但是當(dāng)你點(diǎn)擊的時(shí)候，你會(huì)發(fā)現(xiàn)右邊 Main 是404，因?yàn)槲覀冞€需要配置一下router （代表當(dāng)我點(diǎn)擊“新添加的表單”這個(gè)彩蛋的時(shí)候，右邊需要顯示的頁(yè)面是什么）

2、點(diǎn)擊router.JS 在表單頁(yè)下面 children 添加30行-44行

'/form/new-basic-form': {
   component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/newBasicForm')),
 },

因?yàn)殒溄拥氖莕ewBasicForm 就需要?jiǎng)?chuàng)建一個(gè)newBasicForm.JS

在routes——》Forms——》下創(chuàng)建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 (
    //  這個(gè)個(gè)組件 自帶頭
    <PageHeaderLayout
    title="new-基礎(chǔ)表單"
    content="表單頁(yè)用于向用戶收集或驗(yàn)證信息，基礎(chǔ)表單常見于數(shù)據(jù)項(xiàng)較少的表單場(chǎng)景。"
    >
    <Card bordered={false}>
      <p>你好我叫劉國(guó)富</p>
      <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
      <FormItem {...formItemLayout} label="標(biāo)題">
       {getFieldDecorator('title', {
        rules: [
         {
          required: true,
          message: '請(qǐng)輸入標(biāo)題',
         },
        ],
       })(<Input placeholder="給目標(biāo)起個(gè)名字" />)}
      </FormItem>
      </Form>
    </Card>
    </PageHeaderLayout>

   );
  }
 }

當(dāng)點(diǎn)擊新添加的表單，右邊則顯示為：你好我叫劉國(guó)富。