ant design vue導(dǎo)航菜單與路由配置操作
此功能包含:
1.根據(jù)動(dòng)態(tài)路由自動(dòng)展開與自動(dòng)選擇對(duì)應(yīng)路由所在頁面菜單
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: '分析頁', path: '/dashboard/analysis', index: '/analysis' }, { text: '監(jiān)控頁', 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í)候,右邊需要顯示的頁面是什么)
2、點(diǎn)擊router.JS 在表單頁下面 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àn)證信息,基礎(chǔ)表單常見于數(shù)據(jù)項(xiàng)較少的表單場景。" > <Card bordered={false}> <p>你好我叫劉國富</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)擊新添加的表單,右邊則顯示為:你好我叫劉國富。
以上這篇ant design vue導(dǎo)航菜單與路由配置操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 解決Vue路由導(dǎo)航報(bào)錯(cuò):NavigationDuplicated:?Avoided?redundant?navigation?to?current?location
- vue3容器布局和導(dǎo)航路由實(shí)現(xiàn)示例
- vue如何根據(jù)權(quán)限生成動(dòng)態(tài)路由、導(dǎo)航欄
- 在vue中實(shí)現(xiàn)某一些路由頁面隱藏導(dǎo)航欄的功能操作
- vue 導(dǎo)航菜單刷新狀態(tài)不消失,顯示對(duì)應(yīng)的路由界面操作
- Vue 解決父組件跳轉(zhuǎn)子路由后當(dāng)前導(dǎo)航active樣式消失問題
- Vue?3?中使用?vue-router?進(jìn)行導(dǎo)航與監(jiān)聽路由變化的操作
相關(guān)文章
使用vuex存儲(chǔ)用戶信息到localStorage的實(shí)例
今天小編就為大家分享一篇使用vuex存儲(chǔ)用戶信息到localStorage的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11vue項(xiàng)目啟動(dòng)后沒有局域網(wǎng)地址問題
這篇文章主要介紹了vue項(xiàng)目啟動(dòng)后沒有局域網(wǎng)地址問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09Vue編譯器源碼分析compileToFunctions作用詳解
這篇文章主要為大家介紹了Vue編譯器源碼分析compileToFunctions作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07Vue 實(shí)時(shí)監(jiān)聽窗口變化 windowresize的兩種方法
這篇文章主要介紹了Vue 實(shí)時(shí)監(jiān)聽窗口變化 windowresize的兩種方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11Vue項(xiàng)目中使用setTimeout存在的潛在問題及解決
這篇文章主要介紹了Vue項(xiàng)目中使用setTimeout存在的潛在問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01