手撸一个vue管理页面，支持markdown

生命不止，奋斗不息，终于有了片刻的喘息，让我能在闲暇之余，继续构建我的个人博客。通过

前面几章的学习，我们已经通过自己的努力，编写了博客的首页，博客的登录页，

今天我就带大家手撸后台管理页面（写的很糙，大家不要介怀）

• 路由的管理

在写管理页面的时候，我遇到了一个拦路虎， 就是我创建了一个 Dashborad.vue，用它来表示博客后端页面的概览页，准备放一些统计信息。当我按照之前的那种方法给它指定一个路由的时候，我尴尬的发现，博客首页的头和尾都在，很明显，我们想拥有与首页不同的样式和内容，这种情况怎么办呢。

这就需要大家对前端路由又一个很好的理解了，首先我们要明白，前端路由是如何控制组件在页面显示的。在index.js文件中，脚手架工具vue-cli自动给我们new了一个路由对象Router，并通过routes这个key来指定路由规则。那么具体组件的内容要显示在html的哪个位置呢，我们注意到，App.vue中有一个叫router-view的标签，

这个标签起到占位的作用，即将路由到的组件内容，替换router-view的位置。既然默认的那个router-view我用不了，我可不可以拥有一个自己的router-view呢？答案当然是可以的，并且我们可一个给它一个name属性，与默认的router-view区分，默认的router-view的name属性为default, 可以省略不写。

于是我的App.vue改动如下图：

新建Dashboard.vue,内容如下：

如何将组件路由到指定的占位符上呢？下面改动index.js文件

这里发现在路由对象中，路由规则中的name指定为back, 这和我们之前在App.vue中router-view的name相吻合，这样我们就把概览页面添加到我们的SPA的应用中了。

很简单吧

• 集成markdow编辑器

路由页面跳转问题解决了，下面就是发布文章的界面了，作为一个程序员，首选编辑器就是markdow，别的富文本编辑器，有空再整吧。doge了一下(比百度要良心的搜索引擎)，发现实现markdown的集成大概两条思路，一个是引用插件，一个是手撸。手撸暂不考虑，毕竟咱不是专业前端。

这里我用的是 mavon-editor 插件，我们来看Edit.vue页面：

引用超级简单, 在script标签中，引入组件及样式

import { mavonEditor } from 'mavon-editor';

import 'mavon-editor/dist/css/index.css';

在components中注册组件，并在html中将它展示出来。

默认的样式可能不太合适，我们可以在edit.css中设置自己的样式

.v-note-wrapper{

}

将自己的样式填入其中就可以改变宽度高度等。

• 设置自己的body

管理端的背景我们想自定义怎么办，这里有好几个方法。

我把我自己的方法贴上去：

#container {
 position: absolute;
 height: 100%;
 width: 100%;
 top:0;
 left: 0;
 overflow-y: auto;
 background-color: #f0f2f5;
}

既给组件的最外层div一个绝对定位，让组件的样式显示出来，遮住body的默认样式

有人说，这样很不vue, 怎么办呢， 我们可以通过生命周期函数，beforeRouteEnter

和 beforeRouteLeave 来实现，通过document.body.style 来设置样式。当然其它钩子函数也

可以，这里就不给大家去演示了，至于这两种方法哪个好，还需要大家自己细细体会。如果

有哪位大神读者，知道怎样更优雅，欢迎在下方留言评论，期待大家一起进步，谢谢！