基于vue、avue、element-ui的前端框架saber的顶部菜单栏配置

最新推荐文章于 2024-05-24 09:54:53 发布

诗雨ii

最新推荐文章于 2024-05-24 09:54:53 发布

阅读量4.7k

点赞数 3

分类专栏： vue Saber 文章标签： vue java

本文链接：https://blog.csdn.net/weixin_43838577/article/details/103905083

版权

vue 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

Saber

1 篇文章 0 订阅

订阅专栏

本文详细介绍了在Saber项目中新增菜单模块及绑定路由的过程。从修改menu.js文件到添加新页面，展示了如何在src/views目录下创建并编写新页面的Vue组件，包括按钮与选择器的使用。同时，通过调用API获取数据，实现动态内容展示。

摘要由CSDN通过智能技术生成

步骤1：

文件位置：Saber/src/mock/menu.js
在这里插入图片描述
新增菜单模块：

步骤2：

绑定对应模块路由：（与步骤1中的模块菜单名称对应）
在这里插入图片描述
在zh.js中添加新增菜单的名称：（与对应路由名称绑定）

新建一个页面，路径与步骤1中页面路径对应（Saber/src/views/util/test.vue），编写页面：

在这里插入图片描述

完成效果图如下：
在这里插入图片描述

附上test.vue的完整测试代码：

<template>
  <div>
    <basic-container>
      <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </el-row>
      <br>
      <el-select v-model="value" clearable placeholder="请选择" @change="onChange">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </basic-container>
  </div>
</template>

<script>
  import {getList} from '@/api/system/menu'
  export default {
    name: "wel",
    data() {
      return {
          options: [{
              value: '选项1',
              label: '黄金糕'
          }, {
              value: '选项2',
              label: '双皮奶'
          }, {
              value: '选项3',
              label: '蚵仔煎'
          }, {
              value: '选项4',
              label: '龙须面'
          }, {
              value: '选项5',
              label: '北京烤鸭'
          },{
              value: '选项6',
              label: '东坡肉'
          }],
          value: ''
      };
    },
    computed: {},
    created() {
      // 调用接口
      getList().then(res=>{
        console.log(res.data.data)
      })
    },
    methods: {
      onChange() {
        console.log(this.value)
      }
    }
  };
</script>

<style scoped="scoped" lang="scss">
</style>