fix topnav一级导航跳转失败

This commit is contained in:
zory 2022-04-19 20:38:44 +08:00
parent bdc65fbfe9
commit a4089d4499
2 changed files with 77 additions and 70 deletions

View File

@ -21,137 +21,142 @@
</template> </template>
<script setup> <script setup>
import { constantRoutes } from "@/router"; import { constantRoutes } from '@/router'
import { isHttp } from "@/utils/validate"; import { isHttp } from '@/utils/validate'
import { useRouter } from 'vue-router'
// //
const visibleNumber = ref(5); const visibleNumber = ref(5)
// //
const isFrist = ref(false); const isFrist = ref(false)
// index // index
const currentIndex = ref(null); const currentIndex = ref(undefined)
const store = useStore(); const store = useStore()
const route = useRoute(); const route = useRoute()
const router = useRouter()
// //
const theme = computed(() => store.state.settings.theme); const theme = computed(() => store.state.settings.theme)
// //
const routers = computed(() => store.state.permission.topbarRouters); const routers = computed(() => store.state.permission.topbarRouters)
// //
const topMenus = computed(() => { const topMenus = computed(() => {
let topMenus = []; let topMenus = []
routers.value.map((menu) => { routers.value.map((menu) => {
if (menu.hidden !== true) { if (menu.hidden !== true) {
// //
if (menu.path === "/") { if (menu.path === '/') {
topMenus.push(menu.children[0]); topMenus.push(menu.children[0])
} else { } else {
topMenus.push(menu); topMenus.push(menu)
} }
} }
}); })
return topMenus; return topMenus
}); })
// //
const childrenMenus = computed(() => { const childrenMenus = computed(() => {
let childrenMenus = []; let childrenMenus = []
routers.value.map((router) => { routers.value.map((router) => {
for (let item in router.children) { for (let item in router.children) {
if (router.children[item].parentPath === undefined) { if (router.children[item].parentPath === undefined) {
if (router.path === "/") { if (router.path === '/') {
router.children[item].path = router.children[item].path = '/redirect/' + router.children[item].path
"/redirect/" + router.children[item].path;
} else { } else {
if (!isHttp(router.children[item].path)) { if (!isHttp(router.children[item].path)) {
router.children[item].path = router.children[item].path =
router.path + "/" + router.children[item].path; router.path + '/' + router.children[item].path
} }
} }
router.children[item].parentPath = router.path; router.children[item].parentPath = router.path
} }
childrenMenus.push(router.children[item]); childrenMenus.push(router.children[item])
} }
}); })
return constantRoutes.concat(childrenMenus); return constantRoutes.concat(childrenMenus)
}); })
// //
const activeMenu = computed(() => { const activeMenu = computed(() => {
const path = route.path; const path = route.path
let activePath = defaultRouter.value; let activePath = defaultRouter.value
if (path.lastIndexOf("/") > 0) { if (path.lastIndexOf('/') > 0) {
const tmpPath = path.substring(1, path.length); const tmpPath = path.substring(1, path.length)
activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/")); activePath = '/' + tmpPath.substring(0, tmpPath.indexOf('/'))
} else if ("/index" == path || "" == path) { } else if ('/index' == path || '' == path) {
if (!isFrist.value) { if (!isFrist.value) {
isFrist.value = true; isFrist.value = true
} else { } else {
activePath = "index"; activePath = 'index'
} }
} }
let routes = activeRoutes(activePath); let routes = activeRoutes(activePath)
if (routes.length === 0) { if (routes.length === 0) {
activePath = currentIndex.value || defaultRouter.value; activePath = currentIndex.value || defaultRouter.value
activeRoutes(activePath);
console.log('activePath', activePath)
activeRoutes(activePath)
} }
return activePath; return activePath
}); })
// //
const defaultRouter = computed(() => { const defaultRouter = computed(() => {
let router; let router
Object.keys(routers.value).some((key) => { Object.keys(routers.value).some((key) => {
if (!routers.value[key].hidden) { if (!routers.value[key].hidden) {
router = routers.value[key].path; router = routers.value[key].path
return true; return true
} }
}); })
return router;
}); return router
})
function setVisibleNumber() { function setVisibleNumber() {
const width = document.body.getBoundingClientRect().width / 3; const width = document.body.getBoundingClientRect().width / 3
visibleNumber.value = parseInt(width / 85); visibleNumber.value = parseInt(width / 85)
} }
function handleSelect(key, keyPath) { function handleSelect(key, keyPath) {
currentIndex.value = key; currentIndex.value = key
if (isHttp(key)) { if (isHttp(key)) {
// http(s):// // http(s)://
window.open(key, "_blank"); window.open(key, '_blank')
} else if (key.indexOf("/redirect") !== -1) { } else if (key.indexOf('/redirect') !== -1) {
// /redirect // /redirect
router.push({ path: key.replace("/redirect", "") }).catch(err => {}); router.push({ path: key.replace("/redirect", "") }).catch(err => {});
} else { } else {
// //
activeRoutes(key); activeRoutes(key)
} }
} }
//
function activeRoutes(key) { function activeRoutes(key) {
let routes = []; var routes = []
if (childrenMenus.value && childrenMenus.value.length > 0) { if (childrenMenus.value && childrenMenus.value.length > 0) {
childrenMenus.value.map((item) => { childrenMenus.value.map((item) => {
if (key == item.parentPath || (key == "index" && "" == item.path)) { if (key == item.parentPath || (key == 'index' && '' == item.path)) {
routes.push(item); routes.push(item)
} }
}); })
} }
if (routes.length > 0) { if (routes.length > 0) {
store.commit("SET_SIDEBAR_ROUTERS", routes); store.commit('SET_SIDEBAR_ROUTERS', routes)
} }
return routes; return routes
} }
onMounted(() => { onMounted(() => {
window.addEventListener("resize", setVisibleNumber); window.addEventListener('resize', setVisibleNumber)
}); })
onBeforeUnmount(() => { onBeforeUnmount(() => {
window.removeEventListener("resize", setVisibleNumber); window.removeEventListener('resize', setVisibleNumber)
}); })
onMounted(() => { onMounted(() => {
setVisibleNumber(); setVisibleNumber()
}); })
</script> </script>
<style lang="scss"> <style lang="scss">
@ -164,7 +169,7 @@ onMounted(() => {
// margin: 0 10px !important; // margin: 0 10px !important;
// } // }
.el-menu--horizontal { .el-menu--horizontal {
border-bottom: 0px !important; border-bottom: 0px !important;
} }
// .topmenu-container.el-menu--horizontal > .el-menu-item.is-active, // .topmenu-container.el-menu--horizontal > .el-menu-item.is-active,
// .el-menu--horizontal > .el-sub-menu.is-active .el-submenu__title { // .el-menu--horizontal > .el-sub-menu.is-active .el-submenu__title {

View File

@ -39,14 +39,14 @@ const permission = {
getRouters().then(res => { getRouters().then(res => {
const sdata = JSON.parse(JSON.stringify(res.data)) const sdata = JSON.parse(JSON.stringify(res.data))
const rdata = JSON.parse(JSON.stringify(res.data)) const rdata = JSON.parse(JSON.stringify(res.data))
const defaultData = JSON.parse(JSON.stringify(res.data)) //const defaultData = JSON.parse(JSON.stringify(res.data))
const sidebarRoutes = filterAsyncRouter(sdata) const sidebarRoutes = filterAsyncRouter(sdata)
const rewriteRoutes = filterAsyncRouter(rdata, false, true) const rewriteRoutes = filterAsyncRouter(rdata, false, true)
const defaultRoutes = filterAsyncRouter(defaultData) //const defaultRoutes = filterAsyncRouter(defaultData)
commit('SET_ROUTES', rewriteRoutes) commit('SET_ROUTES', rewriteRoutes)
commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes)) commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
commit('SET_DEFAULT_ROUTES', sidebarRoutes) commit('SET_DEFAULT_ROUTES', sidebarRoutes)
commit('SET_TOPBAR_ROUTES', defaultRoutes) commit('SET_TOPBAR_ROUTES', sidebarRoutes)
resolve(rewriteRoutes) resolve(rewriteRoutes)
}) })
}) })
@ -66,9 +66,11 @@ function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
route.component = Layout route.component = Layout
} else if (route.component === 'ParentView') { } else if (route.component === 'ParentView') {
route.component = ParentView route.component = ParentView
} else if (route.component === 'InnerLink') { }
route.component = InnerLink // else if (route.component === 'InnerLink') {
} else { // route.component = InnerLink
// }
else {
route.component = loadView(route.component) route.component = loadView(route.component)
} }
} }