手擼一個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 來設置樣式。當然其它鉤子函數也

可以，這裡就不給大家去演示了，至於這兩種方法哪個好，還需要大家自己細細體會。如果

有哪位大神讀者，知道怎樣更優雅，歡迎在下方留言評論，期待大家一起進步，謝謝！