vue后台管理项目

DD小兄弟

已于 2022-10-09 22:42:32 修改

阅读量429

点赞数

分类专栏： vue后台管理项目文章标签：前端 javascript 开发语言

于 2022-10-07 21:24:06 首次发布

本文链接：https://blog.csdn.net/qq_64757356/article/details/127198911

版权

1、在src下assets里新建less文件 less文件里新建index.less和reset.less index.less下引入

2）、reset.less下写入代码

3）、在main.js里引入index.less

2、菜单样式

三、左侧跳转到右侧展示相应组件

1、在跳转的位置写入@click="clickMenu()"

2、引入

3、定义使用useRouter方法

4、定义clickMenu方法

5、src>views下创建User文件夹以及User文件夹里的User.vue

6、src>router>index.js下引入

7、重定义根目

一、菜单的初步实现

1.遍历

<script>
export default {
    setup() {
    //定义数组
        const list = [
        {
          path: '/user',
          name: 'user',
          label: '用户管理',
          icon: 'user',
          url: 'UserManage/UserManage'
        },
        {
          label: '其他',
          icon: 'location',
          path:'/other',
          children: [
            {
              path: '/page1',
              name: 'page1',
              label: '页面1',
              icon: 'setting',
              url: 'Other/PageOne'
            },
            {
              path: '/page2',
              name: 'page2',
              label: '页面2',
              icon: 'setting',
              url: 'Other/PageTwo'
            }
          ]
        }
      ];
        //定义方法  是否有二级菜单
      const noChildren = ()=>{
        return list.filter((item) => !item.children);
      };
      const hasChildren = ()=>{
        return list.filter((item) => item.children);
      };
      return {
        noChildren,
        hasChildren,
      }
    },
};
</script>

2.使用

<el-menu-item

        :index="item.path"

        v-for="item in noChildren()"

        :key="item.path">

        //动态引入icon图标

        <component class="icons" :is=item.icon></component>

        <span>{
  {item.label}}</span>

</el-menu-item>