<template> <div class="container"> <template v-for="(moduleRoute, index) in modules" :key="index"> <p class="module" @click="moduleRoute.length === 1 ? $router.push(moduleRoute[0].path) : null"> {{ index }} <span v-if="moduleRoute.length === 1">-- {{ moduleRoute[0].meta.title }}</span> </p> <div class="module_content" v-if="moduleRoute.length !== 1"> <div class="module_item" v-for="(route, i) of moduleRoute" :key="route.path" @click="$router.push(route.path)"> {{ i + 1 }}. {{ route.meta.title }} </div> </div> </template> </div> </template> <script> export default { data() { return { modules: [], }; }, mounted() { this.getModules() }, methods: { getModules() { let routers = this.$router.getRoutes() || [] let modules = {} routers = routers .filter((route) => route.meta.title) .forEach(route => { let moduleName = route.path.split('/')[1] if (!modules.hasOwnProperty(moduleName)) modules[moduleName] = [] modules[moduleName].push(route) }); this.modules = modules } }, }; </script> <style scoped lang="less"> .container { overflow: scroll; } .module { background-color: #eceff9; line-height: 5vh; color: #4762C3; border: 1px solid #e4e7f2; font-size: 4vw; font-weight: 600; padding-left: 2vw; } .module_content { padding: 10px 20px; } .module_item { color: gray; line-height: 4vh; } </style>