vue 嵌套表格组件_[前端随笔][Vue] 多级菜单实现思路——组件嵌套

说在前面

本篇记录学习了vue-element-admin中的多级菜单的实现 　　[

@vue/cli 4.2.2；vuex；scss；组件嵌套

正文

创建项目

npm create 项目名 //或npm init webpack 项目名

安装element-ui

npm add element-ui //或npm i element-ui

安装vuex

npm add vuex //或npm i vuex

安装完vuex后会出现src/store目录，同时在src/main.js中vue实例添加了store(这里是关于vuex的知识先放一下)

首先侧边栏的内容哪来？需要根据路由表来展示。

所以我们需要

一、 构造子页面并配置路由

1 在src/views目录建两个目录和三个vue文件book/read.vue，book/write.vue和 movie/watch.vue (template+script构造页面)

2 接着配置这三个页面的路由如下

constroutes = [

{

path: '/book',

component: Layout,

redirect: '/book/write',

children: [

{

path: '/book/write',

component: () => import('@/views/book/write'),

name: 'book',

meta: { title: '写书', icon: 'edit', roles: ['admin'] }

},

{

path: '/book/read',

component: () => import('@/views/book/read'),

name: 'book',

meta: { title: '读书', icon: 'edit' }

}

]

},

{

path: '/movie',

component: Layout,

redirect: '/movie/watch',

children: [

{

path: '/movie/watch',

component: () => import('@/views/movie/watch'),

name: 'movie',

meta: { title: '看电影', icon: 'edit' }

}

]

}

]

这里面的component:layout是什么呢？

二、构造主页面(准备引用菜单栏)

简单说layout它是一个整体的页面结构，比如一个页面有侧边栏也有正文内容，还有顶部底部等，他们都在这里被引入。

接下来就来实现它：

建立一个目录和主文件src/layout/index.vue，再建立一个目录src/layout/components存放整体结构下的一些部件，比如侧边栏、设置按钮等。

这里的index.vue