P6-Vue3后台管理系统-构建业务组件连通公共组件

1.概述

这篇文章我们将创建业务模块，并且与公共组件进行连通。

2.构建业务模块

2.1.构建Home

2.2.构建VideoManage

2.3.构建UserManage

2.4.构建Other

3.构建业务组件路由

在router下的index.js文件配置业务路由映射关系表

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)// 导入组件
const Main = () => import('@/views/Main.vue')
const Home = () => import('@/views/Home/Home')
const VideoManage = () => import('@/views/VideoManage/VideoManage')
const UserManage = () => import('@/views/UserManage/UserManage')
const PageOne = () => import('@/views/Other/PageOne')
const PageTwo = () => import('@/views/Other/PageTwo')// 配置路由映射关系表
const routes = [{path: '/',component: Main,// 配置子路由，他们都是Main的子路由children: [{path: '/',name: 'home',component: Home},{path: '/video',name: 'video',component: VideoManage},{path: '/user',name: 'user',component: UserManage},{path: '/page1',name: 'page1',component: PageOne},{path: '/page2',name: 'page2',component: PageTwo}]}
]const router = new VueRouter({routes
})export default router

4.连通公共组件

4.1.Main.vue组件展示业务组件路由

4.2.配置路由跳转

在CommonAside组件中通过监听用户点击的导航栏菜单事件，触发绑定的方法，在该方法中实现路由跳转到指定组件页面

4.3.解决重复点击一个菜单路由报错

同一个页面路由重复跳转报错信息
解决办法降低router版本

# 进入项目根路径
cd vue-manage-system
# router降为3.0版本
yarn add vue-router@3.0 -S

同一个页面路由重复跳转没有报错

4.4.连通Tag标签

查看Element官网Tag提供的事件，我们给这个事件绑定一个方法实现连通Tag标签
CommonTab组件为事件绑定方法
CommonTab组件完整代码

<template><div class="tabs"><!-- :closable="tag.name !== 'home'" tag标签为home时不显示关闭按钮 --><el-tagsize="small":key="tag.name"v-for="tag in tags":closable="tag.name !== 'home'":disable-transitions="false"@click="changeMenu(tag)"@close="handleClose(tag)">{{ tag.label }}</el-tag></div>
</template><script>
// 引入vuex模块
import { mapMutations, mapState } from 'vuex'
export default {computed: {// 使用vuex中state管理的tabsList数组对象数据...mapState({tags: state => state.tab.tabsList})},data() {return {dynamicTags: ['标签一', '标签二', '标签三'],inputVisible: false,inputValue: ''}},methods: {...mapMutations({close: 'closeTab'}),// 通过事件绑定方法，当用户点击关闭时将tab作为参数传递给close方法，通过close方法调用vuex中的closeTab方法handleClose(tag) {this.close(tag)},// Tag标签与业务组件路由跳转连通changeMenu(item) {// 点击Tag标签跳转到对应业务组件的路由页面this.$router.push({ name: item.name })// 将用户点击导航的菜单传递给Vuex的selectMenu方法，实现CommonHeader组件面包屑展示菜单数据联动。this.$store.commit('selectMenu', item)}}
}
</script><style lang="scss" scoped>
// 设置tag标签样式
.tabs {padding: 20px;.el-tag {margin-right: 15px;}
}
</style>

CommonTab组件标签路由跳转效果

P6-Vue3后台管理系统-构建业务组件连通公共组件相关推荐

vue3后台管理系统
vue3后台管理系统 vite构建vue3项目项目中其他需求的引入 1. element-plus引入 2. vue3引入路由 3. element-plus图标的引入和使用静态引入图标动态引入 ...
vue3后台管理系统（https://github.com/noob-Jp/my-admin-vue3）
# my-admin-vue3 线上预览地址:vue3后台管理系统本项目是我第一次写vue3,vue2已经学了很长时间,早就想开始接触vue3,通过b站和github上项目的介绍我了解到好多成熟的v ...
开箱即用，这些 Vue3 后台管理系统模板绝对让你爽歪歪！
原文链接:Vue3 后台管理系统模板推荐. 之前写了一篇关于 Vue2 的后台管理系统模板的推荐,详情请见 Vue后台管理系统模板推荐. Vue3 在今年2月份已成为新的默认版本,本文收集了一些 Vu ...
基于nuxt和iview搭建OM后台管理系统实践(2)-quill富文本组件的封装
目录结构这是<基于nuxt和iview搭建OM后台管理系统实践>这一个系列文章的目录,大致思路如下: 简要介绍OM后台管理系统,以及开发环境自行开发的公共组件(富文本.地图.上传)介绍 ...
Vue3后台管理系统模板推荐
文章目录 @[TOC](文章目录) 1.Vue-Vben-Admin 2.vue-manage-system 1.Vue-Vben-Admin Vue-Vben-Admin(github上的标星数为1 ...
React后台管理系统-商品列表搜索框listSearch组件
1.商品列表搜索框 2.搜索框页面的结构为 <div className="row search-wrap"> <div classN ...
Vue3后台管理系统（四）SVG图标
目录一.安装 vite-plugin-svg-icons 二.创建图标文件夹三.main.ts 引入注册脚本四.vite.config.ts 插件配置五.TypeScript支持六.组件封装 ...
用 Vite+Vue3+Ts 搭建通用后台管理系统
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群通用后台管理系统整体架构方案(Vue) 项目创建,脚手架的选择(vite or vue-cl ...
用vite+Vue3+ts搭建通用后台管理系统
点击上方关注前端技术江湖,一起学习,天天进步通用后台管理系统整体架构方案(Vue) 项目创建,脚手架的选择(vite or vue-cli) vue-cli基于webpack封装,生态非常强大,可 ...

P6-Vue3后台管理系统-构建业务组件连通公共组件

P6-Vue3后台管理系统-构建业务组件连通公共组件

1.概述

2.构建业务模块

2.1.构建Home

2.2.构建VideoManage

2.3.构建UserManage

2.4.构建Other

3.构建业务组件路由

4.连通公共组件

4.1.Main.vue组件展示业务组件路由

4.2.配置路由跳转

4.3.解决重复点击一个菜单路由报错

4.4.连通Tag标签

P6-Vue3后台管理系统-构建业务组件连通公共组件相关推荐

最新文章

热门文章