update
This commit is contained in:
huzhushan
parent
7cc3274ebc
commit
9b89d24d2e
19
mock/menu.js
19
mock/menu.js
@ -42,15 +42,18 @@ export default [
|
||||
{
|
||||
name: 'testList',
|
||||
title: '列表',
|
||||
children: [
|
||||
{
|
||||
name: 'testAdd',
|
||||
title: '添加',
|
||||
},
|
||||
{
|
||||
name: 'testEdit',
|
||||
title: '编辑',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'testAdd',
|
||||
title: '添加',
|
||||
},
|
||||
{
|
||||
name: 'testEdit',
|
||||
title: '编辑',
|
||||
},
|
||||
|
||||
// {
|
||||
// name: 'testAuth',
|
||||
// title: '权限测试',
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"axios": "^0.21.1",
|
||||
"vue": "3.2.33",
|
||||
"vue": "^3.2.33",
|
||||
"vue-router": "^4.0.5",
|
||||
"vuex": "^4.0.0",
|
||||
"pinia": "^2.0.14"
|
||||
|
||||
@ -39,8 +39,8 @@
|
||||
<script>
|
||||
import { defineComponent } from 'vue'
|
||||
import { ElConfigProvider } from 'element-plus'
|
||||
import localeZH from 'element-plus/lib/locale/lang/zh-cn'
|
||||
import localeEN from 'element-plus/lib/locale/lang/en'
|
||||
import localeZH from 'element-plus/es/locale/lang/zh-cn'
|
||||
import localeEN from 'element-plus/es/locale/lang/en'
|
||||
import useLang from '@/i18n/useLang'
|
||||
|
||||
export default defineComponent({
|
||||
|
||||
@ -58,6 +58,7 @@ import { useRoute } from 'vue-router'
|
||||
import config from './config/menu.module.scss'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useMenus } from '@/pinia/modules/menu'
|
||||
import { useApp } from '@/pinia/modules/app'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
@ -76,10 +77,16 @@ export default defineComponent({
|
||||
setup() {
|
||||
const route = useRoute()
|
||||
const { menus } = storeToRefs(useMenus())
|
||||
const appStore = useApp()
|
||||
const { matchedRoutes } = storeToRefs(appStore)
|
||||
|
||||
return {
|
||||
menus,
|
||||
activePath: computed(() => route.path),
|
||||
activePath: computed(() => {
|
||||
return matchedRoutes.value.length > 1
|
||||
? matchedRoutes.value[1].path
|
||||
: route.path
|
||||
}),
|
||||
variables: computed(() => config),
|
||||
}
|
||||
},
|
||||
|
||||
@ -71,7 +71,8 @@ import { useRouter } from 'vue-router'
|
||||
export default defineComponent({
|
||||
setup(props, { emit }) {
|
||||
const { proxy } = getCurrentInstance()
|
||||
const { device } = storeToRefs(useApp())
|
||||
const appStore = useApp()
|
||||
const { device } = storeToRefs(appStore)
|
||||
const router = useRouter()
|
||||
const route = router.currentRoute // 这里不使用useRoute获取当前路由，否则下面watch监听路由的时候会有警告
|
||||
const breadcrumbs = ref([])
|
||||
@ -80,16 +81,37 @@ export default defineComponent({
|
||||
() => defaultSettings.menus.mode === 'horizontal'
|
||||
)
|
||||
|
||||
const allRoutes = router.getRoutes()
|
||||
|
||||
const recursionArr = (matched, route) => {
|
||||
const parent = route.meta.parent
|
||||
if (parent) {
|
||||
const parentRoute = allRoutes.find(item => item.name === parent)
|
||||
if (parentRoute && parentRoute.meta && parentRoute.meta.title) {
|
||||
matched.splice(
|
||||
matched.findIndex(item => item.name === route.name),
|
||||
0,
|
||||
parentRoute
|
||||
)
|
||||
recursionArr(matched, parentRoute)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const getBreadcrumbs = route => {
|
||||
const home = [{ path: '/', meta: { title: proxy.$t('menu.homepage') } }]
|
||||
if (route.name === 'home') {
|
||||
appStore.setMatchedRoutes(home)
|
||||
return home
|
||||
} else {
|
||||
const matched = route.matched.filter(
|
||||
item => !!item.meta && !!item.meta.title
|
||||
)
|
||||
|
||||
return [...home, ...matched]
|
||||
// return [...home, ...matched]
|
||||
recursionArr(matched, route)
|
||||
appStore.setMatchedRoutes(matched)
|
||||
return matched
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -35,8 +35,7 @@
|
||||
|
||||
import { ElLoading } from 'element-plus'
|
||||
import router from '@/router'
|
||||
// import store from '@/store'
|
||||
import { TOKEN } from '@/store/modules/app' // TOKEN变量名
|
||||
import { TOKEN } from './pinia/modules/app' // TOKEN变量名
|
||||
import { nextTick } from 'vue'
|
||||
import { useApp } from './pinia/modules/app'
|
||||
import { useAccount } from './pinia/modules/account'
|
||||
|
||||
@ -28,6 +28,7 @@ export const useApp = defineStore('app', {
|
||||
collapse: getItem(COLLAPSE),
|
||||
},
|
||||
device: 'desktop',
|
||||
matchedRoutes: [],
|
||||
}),
|
||||
actions: {
|
||||
setCollapse(data) {
|
||||
@ -42,6 +43,9 @@ export const useApp = defineStore('app', {
|
||||
setDevice(device) {
|
||||
this.device = device
|
||||
},
|
||||
setMatchedRoutes(payload) {
|
||||
this.matchedRoutes = payload
|
||||
},
|
||||
setToken(data) {
|
||||
this.authorization = data
|
||||
// 保存到localStorage
|
||||
|
||||
@ -58,8 +58,8 @@ export const useMenus = defineStore('menu', () => {
|
||||
icon: item.icon,
|
||||
}
|
||||
if (item.children) {
|
||||
if (item.children.filter(child => !child.hidden).length <= 1) {
|
||||
menu.url = generateUrl(item.children[0].path, menu.url)
|
||||
if (item.children.filter(child => !child.hidden).length <= 0) {
|
||||
delete menu.children
|
||||
} else {
|
||||
menu.children = getFilterMenus(item.children, menu.url)
|
||||
}
|
||||
@ -71,6 +71,47 @@ export const useMenus = defineStore('menu', () => {
|
||||
return menus
|
||||
}
|
||||
|
||||
// 扁平化树形数据
|
||||
const flattenTree = tree => {
|
||||
let result = []
|
||||
tree.forEach(node => {
|
||||
result.push(node) // 将当前节点添加到结果数组中
|
||||
if (node.children && node.children.length) {
|
||||
// 如果有子节点，将子节点添加到结果数组中
|
||||
result = result.concat(flattenTree(node.children))
|
||||
delete node.children
|
||||
}
|
||||
})
|
||||
return result
|
||||
}
|
||||
|
||||
const optimizeRoutes = (arr, parentPath = '', parentName = '') => {
|
||||
return arr.map(obj => {
|
||||
const item = {
|
||||
...obj,
|
||||
}
|
||||
item.path = item.path.startsWith('/')
|
||||
? item.path
|
||||
: parentPath
|
||||
? `${parentPath}/${item.path}`
|
||||
: item.path
|
||||
if (parentName) {
|
||||
item.meta.parent = parentName
|
||||
}
|
||||
if (item.children) {
|
||||
item.children = optimizeRoutes(item.children, item.path, item.name)
|
||||
}
|
||||
return item
|
||||
})
|
||||
}
|
||||
|
||||
const formatRoutes = routes => {
|
||||
return routes.map(route => ({
|
||||
...route,
|
||||
children: flattenTree(optimizeRoutes(route.children || [])),
|
||||
}))
|
||||
}
|
||||
|
||||
const menus = ref([])
|
||||
const setMenus = data => {
|
||||
menus.value = data
|
||||
@ -91,11 +132,14 @@ export const useMenus = defineStore('menu', () => {
|
||||
})
|
||||
// 过滤出需要添加的动态路由
|
||||
const filterRoutes = getFilterRoutes(asyncRoutes, data)
|
||||
filterRoutes.forEach(route => router.addRoute(route))
|
||||
|
||||
// 生成菜单
|
||||
const menus = getFilterMenus([...fixedRoutes, ...filterRoutes])
|
||||
setMenus(menus)
|
||||
|
||||
// 添加动态路由，由于只做了二级路由，所以需要将三级之后的children提到二级
|
||||
const arr = formatRoutes(filterRoutes)
|
||||
arr.forEach(route => router.addRoute(route))
|
||||
}
|
||||
}
|
||||
return {
|
||||
|
||||
@ -39,25 +39,28 @@ export default [
|
||||
meta: {
|
||||
title: 'menu.testList',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'add',
|
||||
name: 'testAdd',
|
||||
component: Add,
|
||||
meta: {
|
||||
title: 'menu.testAdd',
|
||||
},
|
||||
hidden: true, // 不在菜单中显示
|
||||
},
|
||||
{
|
||||
path: 'edit/:id',
|
||||
name: 'testEdit',
|
||||
component: Edit,
|
||||
meta: {
|
||||
title: 'menu.testEdit',
|
||||
},
|
||||
hidden: true, // 不在菜单中显示
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'add',
|
||||
name: 'testAdd',
|
||||
component: Add,
|
||||
meta: {
|
||||
title: 'menu.testAdd',
|
||||
},
|
||||
hidden: true, // 不在菜单中显示
|
||||
},
|
||||
{
|
||||
path: 'edit/:id',
|
||||
name: 'testEdit',
|
||||
component: Edit,
|
||||
meta: {
|
||||
title: 'menu.testEdit',
|
||||
},
|
||||
hidden: true, // 不在菜单中显示
|
||||
},
|
||||
|
||||
// {
|
||||
// path: 'auth',
|
||||
// name: 'testAuth',
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
<template>
|
||||
<h1>二级菜单</h1>
|
||||
<h3>二级菜单的页面是不会缓存的</h3>
|
||||
<router-view />
|
||||
nest
|
||||
</template>
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
本页面主动抛出了错误（任何页面报错都会记录到错误日志中），现在你可以点击右上角的`debugger`图标查看错误日志
|
||||
</h4>
|
||||
<div>
|
||||
你可以在`store/modules/errorLog.js`的`addErrorLog`方法中将错误上报到服务器
|
||||
你可以在`pinia/modules/errorLog.js`的`addErrorLog`方法中将错误上报到服务器
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user