📔 文档相关 | 按照文档菜单联动部分设置无效

[lfcleo]

代码重新编辑了下，在下方

[lfcleo]

按照文档 https://d2.pub/zh/doc/d2-admin/menu/#%E8%8F%9C%E5%8D%95%E8%81%94%E5%8A%A8 设置菜单联动部分无效，代码如下 main.js

// Vue
import Vue from 'vue'
import i18n from './i18n'
import App from './App'
// 核心插件
import d2Admin from '@/plugin/d2admin'
// store
import store from '@/store/index'

// 菜单和路由设置
import router from './router'
import { menuHeader, menuAside } from '@/menu'
import { frameInRoutes } from '@/router/routes'

// 核心插件
Vue.use(d2Admin)

new Vue({
router,
store,
i18n,
render: h => h(App),
created () {
// 处理路由 得到每一级的路由设置
this.$store.commit('d2admin/page/init', frameInRoutes)
// 设置顶栏菜单
this.$store.commit('d2admin/menu/headerSet', menuHeader)
// 设置侧边栏菜单
// this.$store.commit('d2admin/menu/asideSet', menuAside)
// 初始化菜单搜索功能
this.$store.commit('d2admin/search/init', menuHeader)
},
mounted () {
// 展示系统信息
this.$store.commit('d2admin/releases/versionShow')
// 用户登录后从数据库加载一系列的设置
this.$store.dispatch('d2admin/account/load')
// 获取并记录用户 UA
this.$store.commit('d2admin/ua/get')
// 初始化全屏监听
this.$store.dispatch('d2admin/fullscreen/listen')
},
watch: {
'$route.matched' (val) {
const _side = menuAside.filter(menu => menu.path === val[0].path)
this.$store.commit('d2admin/menu/asideSet', _side.length > 0 ? _side[0].children : [])
}
}
}).$mount('#app')

menu.index.js

import { uniqueId } from 'lodash'

/**

@description 给菜单数据补充上 path 字段
@description d2-projects/d2-admin#209
@param {Array} menu 原始的菜单数据
*/
function supplementPath (menu) {
return menu.map(e => ({
...e,
path: e.path || uniqueId('d2-menu-empty-'),
...e.children ? {
children: supplementPath(e.children)
} : {}
}))
}
/**

顶部菜单
*/
export const menuHeader = supplementPath([
{ path: '/index', title: '首页', icon: 'home' },
{
path: '/demo',
title: '页面',
icon: 'folder-o',
children: [
{ path: '/page1', title: '页面 1' },
{ path: '/page2', title: '页面 2' },
{ path: '/page3', title: '页面 3' }
]
}
])
/**

侧边栏菜单
*/
export const menuAside = supplementPath([
{ path: '/index', title: '首页', icon: 'home' },
{
title: '页面',
icon: 'folder-o',
children: [
{ path: '/page1', title: '页面 1' },
{ path: '/page2', title: '页面 2' },
{ path: '/page3', title: '页面 3' }
]
}
])

按照上面的代码，不能像完整版那样，点击顶部的内容导航在侧边栏显示

[FairyEver]

那只是个简单的例子 不要照抄，你要对照你自己的数据格式做

[FairyEver]

在以前的版本侧边栏有bug，1.8.3已经解决了 见 https://github.com/d2-projects/d2-admin/issues/258 你可以检查你手里的是不是以前的旧版本项目

切记 D2Admin 的顶栏菜单和侧边栏菜单相互独立互不影响

[lfcleo]

我是刚下载的，也是在边看文档边实验。

[FairyEver]

完整版仓库的这部分代码：https://github.com/d2-projects/d2-admin/blob/master/src/main.js

[FairyEver]

'$route.matched' (val) {
  const _side = menuAside.filter(menu => menu.path === val[0].path)
  this.$store.commit('d2admin/menu/asideSet', _side.length > 0 ? _side[0].children : [])
}

看明白这几行代码的意思

[lfcleo]

好的，了解了，已解决。