element audio 标签 不显示_Vue-cli+Element-ui实现后台管理系统（三）后台布局框架的实现...

前言

接上文，本文主要讲解vue+element-ui后台管理系统的后台布局框架的实现，主要使用到router-view。

一、vuex-persistedstate介绍

vuex-persistedstate主要是解决Vuex数据持久化在页面刷新后丢失问题。由于vuex的数据保存机制属于运行时机制，将数据保存在运行内存中，一旦页面刷新重载后数据将丢失。但是在实际项目中我们肯定希望数据能够在整个项目生命周期中存在，那么数据应该如何在刷新后继续保留呢？做前端的应该都知道在h5出现后推出了LocalStorage本地存储这个东西，它将数据本地化存储在浏览器数据中，页面不论如何刷新数据依然存在，除非你关闭当前项目的所有标签页。

所以我们可以选择localstorage作为我们vuex数据持久化的辅助操作，我们可以自己去写，当然我们也可以选择已有的轮子。这个轮子就是vuex-persistedstate。

二、vuex-persistedstate的简单实用

1）、vuex-persistedstate安装

在项目中通过以下命令即可安装vuex-persistedstate：

npm install --save vuex-persistedstate  ，这里建议加上--save

2）、配置使用

vuex-persistedstate 的配置是在项目vuex的index.js中文件进行配置：

A、导入vuex-persistedstate包：

import createPersistedState from 'vuex-persistedstate'

B、配置vuex-persistedstate

plugins: [     createPersistedState()  ]

C、配置后结构

vuex-persistedstate配置结构

默认是localstorage模式，其它还支持sessionStorage、cookie两种模式，大家可以按需选择使用。

三、实现后台左侧菜单栏

我们为什么要选用一些ui框架呢？这里选用的是Element-ui，因为他们能够很好的给我们提供很方便的样式结构，正如现在这里的我们要的后台结构，这种结构在ui框架一般叫做容器，所以我们只需要去框架组件页面找到和我们期望的结构类似的结构将ui组件复制使用即可，element-ui提供了很多丰富的容器组件：https://element.eleme.cn/#/zh-CN/component/container

element-ui容器组件

这里我们新建一个后台主页的Index.vue文件将我们要的布局拷贝进去调整一下相应的样式即可实现我们期望的后台框架界面了~如下图所示：

后台管理界面

另外建议这里的布局header、slide菜单这些全部独立成组件，不用写在一个文件中，这样看着比较混乱。以下是我的项目布局的清单，创建了一个layout布局文件夹来存放后台界面布局。

后台界面布局结构清单

四、实现左侧点击右侧内容更新

其实之前看了一些写实现的文章，很多在这一块的描述个人认为比较不清楚，至少对于一个初学者或者对router不了解的人来说，可能不是很容易理解并且实现。

1）、router-view

官方解释： 组件是一个 functional 组件，渲染路径匹配到的视图组件。 渲染的组件还可以内嵌自己的 ，根据嵌套路径，渲染嵌套组件。

其实说白了这个东西就类似于以前的frame框架。

2）、那么我们在vue-cli + Element-ui的后台框架中如何使用呢？

我们上面布局中有一个el标签叫做el-main,这个的主要作用就是现实右侧内容，因为我们的右侧内容是变化的，所以他的子标签就应该用router-view，如下所示：

router-view

当我们要访问的子页面的路由属于当前Index路由的子路由，即可将页面显示在router-view中。

3）、子路由的配置

子路由的配置需要用到一个路由键children, 写在children键中的值路由，均属于其的子路由，这样写在主路由中的router-view组件才能正确的加载它。具体配置如下图所示：

子路由配置

至此整套vue-cli + Element-ui实现后台管理系统框架已经完成了，要写的代码很少，多的是自己的一些后台业务功能代码。如果你还是需要我文章的一些更详细的代码可以私信我~

欢迎评论、私信交流~

一个不是前端的coder，文章如有不足之处还望指出~