AIArena Frontend 初步练习

• 2023-04-06 20:40:43来源：博客园

尝试对starter项目的页面进行改变

(资料图)

修改侧边栏，只留下最上面的「仪表盘」和「列表页」两个大模块

in SideNav.vue the code for the sidebar menu is:

from there we can get to MenuContent.vue

I think it is referencing the items in a list, which is computed by the getMenuList function

computed: {    list(): Array {      return getMenuList(this.navData);    },  },

const getMenuList = (list: MenuRoute[], basePath?: string): MenuRoute[] => {  if (!list) {    return [];  }  return list    .map((item) => {      const path = basePath && !item.path.includes(basePath) ? `${basePath}/${item.path}` : item.path;      return {        path,        title: item.meta?.title,        icon: item.meta?.icon || "",        children: getMenuList(item.children, path),        meta: item.meta,        redirect: item.redirect,      };    })    .filter((item) => item.meta && item.meta.hidden !== true);};

and the list is from MenuRoute, and that is from "@/interface"

but it is just definition in there it seems:

export interface MenuRoute {  path: string;  title?: string;  icon?:    | string    | {        render: () => void;      };  redirect?: string;  children: MenuRoute[];  meta: any;}

so the point is, where is the this.navDatasent into getMenuList

it seems navDatais sent in from something like

in SideNav.vue

and that menu is here:

export default Vue.extend({  name: "sideNav",  components: {    MenuContent,  },  props: {    menu: Array,    showLogo: {      type: Boolean,      default: true,    },

the menu here is sent in from LayoutSidebar.vue(supposedly)

and this sideMenu is from that same file

sideMenu() {      const { layout, splitMenu } = this.$store.state.setting;      let { menuRouters } = this;      if (layout === "mix" && splitMenu) {        menuRouters.forEach((menu) => {          if (this.$route.path.indexOf(menu.path) === 0) {            menuRouters = menu.children.map((subMenu) => ({ ...subMenu, path: `${menu.path}/${subMenu.path}` }));          }        });      }      return menuRouters;    },

but what is this.$store.state.setting?

there is the file src/store/index.ts, and that is from src/store/modules/setting.ts

可是还是没有找到，只能出此下策：

在 MenuContent.vue里面加入一个if判断，把要删的页面全部filter掉