使用Vue来完成项目中的首页导航+左侧菜单(vue项目使用)

使用Vue来完成项目中的首页导航+左侧菜单

目录

1. 准备工作

2. 动态树

2.1 在配置请求路径

2.2 使用动态数据构建导航菜单

2.2.1 通过接口获取数据

2.2.3 通过后台获取的数据构建菜单导航

2.3 点击菜单实现路由跳转

2.3.1 创建书本管理组件

2.3.2 配置路由

2.3.3 修改LeftAside组件

2.3.4 修改Main组件

3. 系统首页配置

4. 表格数据显示

4.1 页面布局

4.2 查询并在表格中显示数据

4.3 实现分页

---

1. 🍓🍓🍓🍓准备工作创建测试数据库准备好后台服务接口，Moudel查询，和Book查询（支持分页）后台单元测试修改vue配置，使用真实环境

推荐整理分享使用Vue来完成项目中的首页导航+左侧菜单(vue项目使用)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue项目使用vconsole,vue项目使用rem,vue项目使用rem,vue项目怎么运行起来,vue在项目中怎么用的,用vue做一个简单的项目,vue项目使用rem,vue项目使用rem,内容如对您有帮助，希望把文章链接给更多的朋友！

2. 🍓🍓🍓🍓动态树2.1 🥭🥭在配置请求路径在src/api/action.js中配置获取动态树数据的请求路径export default {//服务器'SERVER': 'http://localhost:8080/webserver',//登陆请求'SYSTEM_USER_DOLOGIN': '/userMsg/userAction!login.action', //登陆//获取动态树数据请求'SYSTEM_MODULE_REQ': '/sysMsg/sysMsgAction!getModules.action',//获取完整的请求地址'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用return this.SERVER + this[k];}}2.2 🥭🥭使用动态数据构建导航菜单2.2.1 🥭🥭通过接口获取数据LeftAside.vue: 🚀🚀测试，通过控制台查看数据是否正常获取：

🥭🥭2.2.3 通过后台获取的数据构建菜单导航🥭🥭2.2.3.1 先构建一级导航菜单LeftAside.vue: 页面效果：

🥭🥭2.2.3.2 构建二级导航菜单LeftAside.vue:

🚀🚀页面效果：2.3 🥭🥭点击菜单实现路由跳转2.3.1🥭创建书本管理组件t_module_vue表中已经配置了功能url，为方便，将书本管理组件定义为BookList。如果使用其他名字则需要修改功能url配置，保持一致。2.3.2🥭 配置路由

 2.3.3🥭 修改LeftAside组件

2.3.4 🥭修改Main组件

3. 🍓🍓🍓🍓系统首页配置🚀🚀首先创建一个首页组件配置路由：配置首页菜单： 🚀🚀菜单图标可以到官网去查找。🚀🚀设置登录成功后默认显示系统首页：4.🍓🍓🍓🍓 表格数据显示4.1 🥭🥭页面布局页面上使用的面包屑，查询条件，表格，分页等空间，可以查看element-ui官网。该步骤主要关注页面布局，并没有绑定数据，编写完成后，观察页面效果。BookList.vue:<template> <div style="margin-left: 15px; margin-right: 15px;"> <!--面包屑--> <el-breadcrumb style="margin-top:15px;" separator="/"> <el-breadcrumb-item :to="{path: '/Home'}">首页</el-breadcrumb-item> <el-breadcrumb-item>书本管理</el-breadcrumb-item> </el-breadcrumb> <!--查询条件--> <el-form style="margin-top: 15px;" :inline="true" class="demo-form-inline"> <el-form-item label="书名"> <el-input placeholder="书名"></el-input> </el-form-item> <el-form-item> <el-button type="primary">查询</el-button> <el-button type="primary">新增</el-button> </el-form-item> </el-form> <!--表格--> <el-table style="width: 100%;" :border="true" max-height="550"> <el-table-column prop="id" label="编号" min-width="40" align="center"></el-table-column> <el-table-column prop="bookname" label="名称" min-width="100" align="center"></el-table-column> <el-table-column prop="price" label="价格" min-width="70" align="center"></el-table-column> <el-table-column prop="booktype" label="类型" min-width="70" align="center"></el-table-column> </el-table> <!--分页--> <div class="block" style="text-align:right;margin-top:10px;"> <el-pagination :page-sizes="[10, 20, 30, 40]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"> </el-pagination> </div> </div></template>4.2 🥭🥭查询并在表格中显示数据先不考虑分页，从后台接口获取数据并绑定到表格显示。🥭将查询书本信息的接口配置到api/action.js中//获取书本信息 'BOOKMSG_BOOKINFO_REQ':'/bookMsg/bookAction!getBooks.action',BookList.vue组件 图一： 🚀🚀template部分： 图二： 🚀🚀script部分 export default { name: 'BookList', data: function() { return { bookname: '', books: [] } }, methods: { qry: function() { let url = this.axios.urls.BOOKMSG_BOOKINFO_REQ; this.axios.post(url, { bookname: this.bookname }).then(resp => { console.log(resp); this.books = resp.data.data; }).catch(error => { console.log(error); }); } } }4.3 🥭🥭实现分页🚀🚀template部分： <!--分页--> <div class="block" style="text-align:right;margin-top:10px;"> <!-- @size-chang: 定义在每页显示的记录数变化时的处理函数 @current-change：当前页码发生变化时的处理函数，如点击页码或输入一个特定页码。 :current-page：指定当前页， :page-size：每页显示的记录数 layout： 布局，可以通过调整该项来调整显示内容 :total： 总记录数 --> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div>🚀🚀script部分，图一 qry: function() { let url = this.axios.urls.BOOKMSG_BOOKINFO_REQ; this.axios.post(url, { bookname: this.bookname, //分页参数 page: this.page, rows: this.rows }).then(resp => { console.log(resp); this.books = resp.data.data; //获取总页数 this.total = resp.data.total; }).catch(error => { console.log(error); }); }🚀🚀script部分，图二：//当每页显示的记录数发生变化时，设置当前页码为1，执行查询。 handleSizeChange: function(rows) { this.rows = rows; this.page = 1; this.qry(); }, //当前页码发生变化时，执行查询 handleCurrentChange: function(page) { this.page = page; this.qry(); }

VUE3.0有兴趣的小伙伴可以去看看

以上就是一个简单的首页导航+左侧菜单的介绍，欢迎各位大佬给点建议！