通用菜单组件的开发一

今天完善前端通用项目的模版

我们的前端初始化先用Vue cli脚手架跑页面

然后用arco组件库

我们要完善前端通用项目模版

先改几个bug 优化页面布局

这个footer没有一直处于底部

我们在原生css里去修改

把 position 属性改为 sticky 粘性

#basicLayout .footer {
  padding: 16px;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
}

但是我们发现我们进行页面的缩放后

这个footer就不会位于底部

我们还是在原生css里去修改

这样就能一直在底部了

进行通用布局样式的修改

最终呈现效果

我们现在要解决的是这个无权限问题

用户实际上是看不到这个菜单的

我们要优化通用导航栏组件的优化

根据权限隐藏菜单

我们想想看我们之前书写的导航栏逻辑

是获取一个导航栏数组

我们把路由里的不同页面封装成数组

然后进行循环遍历展示

根据配置控制菜单的显示隐藏

我们之前的是在路由中定义每个路由的新的属性叫meta

然后在app.vue中做一个全局的拦截

然后每当我们进入一个新的页面的时候能够进行一个判断

是否有admin

即是否有权限

如果有权限 就放行

如果没有权限 就会 跳转到没有权限的页面

我们可以采取同样的逻辑

定义一个路由

meta里有个hideInMenu属性

代表的是菜单的隐藏与否

 

  {
    path: "/hide",
    name: "隐藏页面",
    component: HomeView,
    meta: {
      hideInMenu: true,
    },
  },

现在我们只要在展示前端页面的时候遍历路由

meta里面的hideInMenu属性

只要是true

我们就不进行展示

我们之前展示路由是靠一个for循环

进行一个判断

注意v-if 和 v-for不要一起用

因为v- for会先去执行

然后就会死循环

我们建议的是

先去写v - if 先过滤一遍

在进行v - for 展示 条件渲染元素

我们先在原生js里过滤一下

这样写

数据存在数组里面

//展示在菜单的路由
const visibleRoutes = routes.filter((item, index) => {
  if (item.meta?.hideInMenu) {
    return false;
  } else {
    return true;
  }
});

注意上边修改

从不同的数组里面拿东西

从visibleRoutes里面拿

就能成功了

初始化全局项目入口

我们先写一个全局初始化函数

钩子函数

预留全局初始化函数 有全局单次调用的代码都能写到这里

钩子函数 页面初始化的时候 去执行函数

//预留全局初始化函数 有全局单次调用的代码都能写到这里
const doInit = () => {
  console.log("欢迎来到我们的项目");
};

//钩子函数 页面初始化的时候 去执行函数
onMounted(() => {
  doInit();
});