此功能包含：

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導航選單與路由配置操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。