首页 > 其他分享 >若依RuoYi-Vue创建菜单并添加自定义页

若依RuoYi-Vue创建菜单并添加自定义页

时间:2024-03-28 15:58:56浏览次数:25  
标签:Vue 自定义 新闻 新增 RuoYi 列表 添加 菜单 页面

全文见:若依管理系统RuoYi-Vue(一):项目启动和菜单创建

添加菜单和页面是若依管理系统最核心的功能,也是使用者最关心的事情,这里涉及到核心中的核心功能:权限,先不考虑那么多,直接新增页面,看看能否生效。

下面演示新闻列表页添加的过程,这里如果想要新增新闻列表菜单,需要先新增“新闻”父菜单目录,再新增“新闻列表”菜单项。

1、添加新闻父目录菜单

依次 点击系统管理->菜单管理->新增,在弹出框中输入内容如下:

这里,菜单图标随意选择,路由地址随意输入news 即可

2、添加新闻列表菜单

在上一步新建的新闻目录那一行点击新增按钮,在弹出框中输入内容如下

 完成之后,新闻列表菜单就添加完成了,之后刷新页面,当前 admin 管理员就能看到添加的菜单了

但是点击新闻列表菜单,会报错,说是没有找到 news/list/index模块,

因为虽然我们定义好了路由和菜单,但是真正的前端页面还没有添加。

毕竟 每一个菜单项都要有一个页面和它对应的嘛。

3、添加新闻列表页面

在前端项目ruoyi-ui 的 ruoyi-ui/src/views 目录下新增 news/list/index.vue 文件,文件内容如下:

 写入下面的代码

<template>
    <div>
        这里就是新闻列表
    </div>

</template>

<script>
export default{
    name:'index'
}
</script>
<style scoped>

</style>

之后再点击新闻列表页,就可以看到页面内容了( 如果出现缓存问题,重新运行命令 npm run dev 即可解决)

 

标签:Vue,自定义,新闻,新增,RuoYi,列表,添加,菜单,页面
From: https://www.cnblogs.com/hailexuexi/p/18101887

相关文章

  • 在Vue项目中使用Vuex进行状态管理是一种常见做法。下面是一个简单的示例,展示了如何创
    步骤1:创建VuexStore首先,你需要创建一个Vuexstore。通常,这是在你的项目的store目录下完成的。//store.jsimportVuefrom'vue';importVuexfrom'vuex';Vue.use(Vuex);conststore=newVuex.Store({state:{count:0},mutations:{increment(......
  • 获取中国周的自定义函数 GetChinaWeekNumber
    报表开发,无意发现SQLServer数据库计算周跟中国周有一点不一样,一般来讲,如果新年的1月1日开始落在的周不满4天,就需要把这几天归集到上一年的周,中国周是从周一~周日,国外的是周日~周六,所以中西方周有点不一样(网上说还有闰年不一样,我没有深入了解,先了解大概,有错误请忽喷,可以用下面的函......
  • (毕业设计)基于Java+Vue+Mysql的网上订餐系统
    前言:网上订餐系统是一个综合性的在线服务平台,旨在为用户提供便捷的点餐、支付、配送等一体化服务。下面是对系统列出的各个功能模块的详细解释:一、个人中心个人中心是用户登录后的主要界面,展示用户的个人信息、订单记录、优惠券、积分等。用户可以在此查看并管理自己的账户......
  • (毕业设计)基于Java+Vue+Mysql的大学生租房平台
     前言:大学生租房平台是一个专门为大学生提供租房服务的在线平台。这个平台不仅简化了租房流程,还提供了多种功能,如房源搜索、在线沟通、合同签订等,让大学生能够轻松、安全地找到适合自己的房源。以下是针对系统列出的七个平台功能的详细解释:一、个人中心个人中心是用户在使......
  • (毕业设计)基于Java+Vue+Mysql的学生心理咨询评估系统
     前言:学生心理咨询评估系统是一个集成了多个功能模块的综合性系统,旨在为学生提供心理咨询服务和评估。以下是对系统的五个主要功能模块的详细解释:一、个人中心个人中心是用户的个人空间,主要用于展示和管理用户的基本信息、心理评估记录、咨询历史等。学生可以在这里查看自......
  • 在Vue.js框架中,activated和created的区别
    在Vue.js框架中,activated和created两个钩子函数都是在组件被创建时执行的函数,但它们的使用场景略有不同。createdcreated钩子函数是在组件被创建(即实例化)时执行的,可以用它来初始化组件的数据、监听事件、调用方法等操作。它是组件生命周期中的第一个钩子函数,通常用于组件初......
  • vue实例的data属性,可以在哪些生命周期中获取到
    Vue实例的data属性可以在beforeCreate、created和beforeMount生命周期中获取到。在Vue实例的生命周期中,data属性在不同的阶段有着不同的可访问性:beforeCreate:在实例初始化之后,数据观测(dataobserver)和事件配置之前被调用。在这个阶段,data属性已经可以被访问,但是事件监听器......
  • vue3子组件给父组件传参,父组件给子组件传参,在父组件中直接调用子组件中的某个方法
    vue3子组件给父组件传参,父组件给子组件传参,在父组件中直接调用子组件中的某个方法1、子传父,以传递id为例子:constemit=defineEmits(['passId']);//在需要传递的参数的地方写,id为需要传递的参数emit('passId',id); 父://引入子组件constSonPage=defineAsyncCo......
  • 解决vue3项目中四周留白的原因
    留白原因:vue3中body有默认属性margin:8px。body{display:block;margin:8px;}如何解决:需要在vue项目中对根目录的index.html进行代码添加<style>body{margin:0;}</style>index.html完整代码:<!DOCTYPEhtml><htmllang="en">&......
  • Vue项目的创建
    个人学习文档,有问题欢迎指出。关于Vue项目的创建可以查看vue官网:https://cn.vuejs.org/guide/quick-start.html目录Vue项目创建步骤:1、打开命令窗口2、输入命令创建项目3、进行项目相关的配置4、下载依赖文件1、进入项目文件夹2、下载node_modules包3、完成配置,5......