前端歌谣-第壹佰零五课-手把手带你理解前端代码篇之vue3+ant design vue篇

最新推荐文章于 2024-09-16 06:30:00 发布

前端歌谣

最新推荐文章于 2024-09-16 06:30:00 发布

阅读量391

点赞数 9

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/qq_41632427/article/details/135076765

版权

歌谣-最强学习合集专栏收录该内容

114 篇文章 1 订阅

订阅专栏

本文介绍了在Vue应用中如何增加动态菜单，通过修改HTML结构并配合AntDesign图标，以及使用VueRouter进行页面跳转和路由配置的过程。作者展示了代码片段以详细说明操作步骤。

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

前言

大家好我是歌谣今天又要进行新的技术栈的理解和开发了

第一步

需求是增加两个菜单进行页面的编写

先看看页面的结构

修改代码如下

 <div v-if="index === 0"><tool-outlined style="font-size: 40px" /></div>
      <div v-if="index === 1">
        <safety-certificate-outlined style="font-size: 40px" />
      </div>
      <div v-if="index === 2"><tool-outlined style="font-size: 40px" /></div>
      <div v-if="index === 3"><safety-certificate-outlined style="font-size: 40px" /></div>
      <h1>{{ item.name }}</h1>

数据定义部分

const menuList = ref<menuItem[]>([
  { id: 1, name: "生产", pathName: "current" },
  { id: 2, name: "质检", pathName: "qualitycontrol" },
  { id: 3, name: "下料", pathName: "blanking" },
  { id: 3, name: "报工", pathName: "reportingwork" },
]);

运行结果

在这里插入图片描述

接下来

接下来就是控制页面的跳转了必然是需要配合路由进行页面跳转的所以就是要增加路由

   {
                path: 'blanking',
                name: 'blanking',
                redirect: '/blanking/blankinglist',
                children: [
                    {
                        path: 'blankinglist',
                        name: 'blankinglist',
                        component: QCHome,
                    },
                ]
            },

接着就是创建一个页面路由指向文件所在的位置进行编写


<template>
    <div>11111</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ToolOutlined, SafetyCertificateOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import { getUserInfo } from "@/api/base";
const router = useRouter();
interface menuItem {
  id: number;
  name: string;
  pathName: string;
}

const menuList = ref<menuItem[]>([
  { id: 1, name: "生产", pathName: "current" },
  { id: 2, name: "质检", pathName: "qualitycontrol" },
  { id: 3, name: "下料", pathName: "blanking" },
  { id: 3, name: "报工", pathName: "reportingwork" },
]);

onMounted(() => {
  init();
});
const init = async () => {
  const response = await getUserInfo();
  console.log(response);
};
const goHome = (pathName: string) => {
  router.push({
    name: pathName,
  });
};
</script>

<style lang="less" scoped>

</style>