大致效果图

其中上方文头部导航，左边为菜单选项，中间为index页面。

进行组件化

新建目录如下，新建文件如下

其中分为两个文件夹，一个为views文件夹，一个为components文件夹，一个存放相关文件页面信息，一个存放相关的组件信息。

创建相关的url

创建相关的页面url 在router目录下新建相关的文件， 代码如下

 {path: '/index',name: 'index',component: () => import('../views/Index')},

index页面组件信息

index页面相关代码文件如下

<template><div><BoxHeader :msg="msg"></BoxHeader><div><el-container><Menum></Menum><BoxIndex v-show="cur==0"></BoxIndex><HelloWorld v-show="cur==1"></HelloWorld></el-container></div></div>
</template>
<style>.el-header {background-color: #B3C0D1;color: #333;}.el-aside {color: #333;}
</style>
<script>import Menum from "../components/Menum";import BoxIndex from "../components/BoxIndex";import BoxHeader from "../components/BoxHeader";import HelloWorld from "../components/HelloWorld";export default {components: {Menum,BoxIndex,BoxHeader,HelloWorld},data() {return {msg: 'https://www.iming.info/',cur: 1}}}
</script>

其中把三个组件进行相关的注册，注册到页面中。这三个组件分别为BoxHeader，BoxIndex，Menum文件，对这三个文件进行相关的注册。

头部文件

进入头部文件，这里对头部文件进行代码，书写，代码如下

<template><div class="text1"><a href="http://localhost:8080/logout" class="text1">退出</a></div>
</template><script>export default {name: 'BoxHeader',props: {msg: String}}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>h3 {margin: 40px 0 0;}ul {list-style-type: none;padding: 0;}li {display: inline-block;margin: 0 10px;}.text1 {text-align: right;padding: 10px;font-size: 20px;}.text1 a{text-decoration: none;}
</style>

菜单文件

菜单文件代码如下。并添加相关的事件绑定，确保能够菜单伸缩。

<template><el-aside width="200px"><el-menu :default-openeds="['1']"><el-submenu index="1"><template slot="title">保险产品管理</template><el-menu-item-group><el-menu-item index="1-1">保险产品查询</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="2"><template slot="title">用户管理</template><el-menu-item-group><el-menu-item index="2-1">封号管理</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="3"><template slot="title">问答管理</template><el-menu-item-group><el-menu-item index="3-1">问题管理</el-menu-item><el-menu-item index="3-2">回答管理</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="4"><template slot="title">数据统计</template><el-menu-item-group><el-menu-item index="4-1">保险产品数据</el-menu-item><el-menu-item index="4-2">保险公司数据</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside>
</template><script>export default {name: 'Menum',methods: {ming(){console.log("3333");}}}
</script>

上方使用的是Element Ui 框架实现

主页文件

这里主页文件为几个简单的主页文件。一个为示例，一个为主页，代码分别如下

<template><el-container><el-header><el-dropdown><i></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>查看</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>删除</el-dropdown-item></el-dropdown-menu></el-dropdown><span>王小虎</span></el-header><el-main><el-table :data="tableData"><el-table-column prop="date" label="日期" width="140"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></el-main></el-container>
</template><script>export default {name: 'HelloWorld',props: {msg: String}}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>h3 {margin: 40px 0 0;}ul {list-style-type: none;padding: 0;}li {display: inline-block;margin: 0 10px;}a {color: #42b983;}
</style>

<template><div class="hello"><h1>{{ msg }}</h1><p>For a guide and recipes on how to configure / customize this project,<br>check out the<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.</p><h3>Installed CLI Plugins</h3><ul><li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li><li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li><li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li><li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li></ul><h3>Essential Links</h3><ul><li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li><li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li><li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li><li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li><li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li></ul><h3>Ecosystem</h3><ul><li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li><li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li><li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li><li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li><li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li></ul></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

进行事件绑定

这里由于跨两个组件，所以进行事件绑定，当子组件触发事件以后，先调用子组件的方法，再通过相关参数，调用父组件的方法，通过调用父组件的方法，实现更改父组件页面的值。

具体流程如下

父组件创建相关方法，并绑定事件

创建相关方法

 methods: {changeData(){console.log(444444);this.cur = 1;}}

绑定相关事件

 <Menum @callFather="changeData"></Menum>

子组件创建相关方法并调用

ming(){console.log("3333");this.$emit("callFather");}

子组件创建相关方法并完成方法绑定

   <el-menu-item-group><el-menu-item index="1-1" v-on:click="ming">保险产品查询</el-menu-item></el-menu-item-group>

子组件全部代码如下

<template><el-aside width="200px"><el-menu :default-openeds="['1']"><el-submenu index="1"><template slot="title">保险产品管理</template><el-menu-item-group><el-menu-item index="1-1" v-on:click="ming">保险产品查询</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="2"><template slot="title">用户管理</template><el-menu-item-group><el-menu-item index="2-1">封号管理</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="3"><template slot="title">问答管理</template><el-menu-item-group><el-menu-item index="3-1">问题管理</el-menu-item><el-menu-item index="3-2">回答管理</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="4"><template slot="title">数据统计</template><el-menu-item-group><el-menu-item index="4-1">保险产品数据</el-menu-item><el-menu-item index="4-2">保险公司数据</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside>
</template><script>export default {name: 'Menum',methods: {ming(){console.log("3333");this.$emit("callFather");}}}
</script>

父组件全部代码如下

<template><div><BoxHeader :msg="msg"></BoxHeader><div><el-container><Menum @callFather="changeData"></Menum><BoxIndex v-show="cur==0"></BoxIndex><HelloWorld v-show="cur==1"></HelloWorld></el-container></div></div>
</template>
<style>.el-header {background-color: #B3C0D1;color: #333;}.el-aside {color: #333;}
</style>
<script>import Menum from "../components/Menum";import BoxIndex from "../components/BoxIndex";import BoxHeader from "../components/BoxHeader";import HelloWorld from "../components/HelloWorld";export default {components: {Menum,BoxIndex,BoxHeader,HelloWorld},data() {return {msg: 'https://www.iming.info/',cur: 0}},methods: {changeData(){console.log(444444);this.cur = 1;}}}
</script>

完成效果图

前

后

有道无术，术可成；有术无道，止于术

欢迎大家关注Java之道公众号

好文章，我在看❤️