共7个文件：

 一、main.js

// 引入Vue
import Vue from 'vue'
// 引入app组件，它是所有组件的父组件
import App from './App.vue'
// 引入VueRouter插件
// eslint-disable-next-line no-unused-vars
import VueRouter from 'vue-router'import router from './router' // index.js可以省略Vue.use(VueRouter) //vue-router// 引入Vuex
// eslint-disable-next-line no-unused-vars
import Vuex from 'vuex'// 引入store
import store from './store/index.js'// ElementUIimport ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI// 关闭vue生产提示
Vue.config.productionTip = false
// 创建vue实例对象 -- vm
const vm = new Vue({el: "#app",// 完成了这个功能：将APP组件放入窗口中render: h => h(App),router:router,store:store,beforeCreate() {Vue.prototype.$bus = this;},})

二、index.js

// 引入路由
// eslint-disable-next-line no-unused-vars
import VueRouter from 'vue-router'
import Box_1 from '../pages/Box_1.vue'
import Box_2 from '../pages/Box_2.vue'
import Menu_1 from '../pages/Menu_1.vue'
import Menu_2 from '../pages/Menu_2.vue'// 创建一个路由器export default new VueRouter({routes: [{path: '/Box_1',component: Box_1,children: [{path: 'Menu_1',component: Menu_1},{path: 'Menu_2',component: Menu_2},]},{path: '/Box_2',component: Box_2,children: [{path: 'Menu_1',component: Menu_1},{path: 'Menu_2',component: Menu_2},]},]})

三、App.vue

四、Box_1.vue

五、Box_2.vue

六、Menu_1.vue

七、Menu_2.vue

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！