(四)選單導航及路由設定

頁面編寫如下,圖示可使用iconfont

增加對應頁面vue檔案，更改路由配置如下:

import Vue from "vue";
import Router from "vue-router";
// 列表頁
import PostList from "./views/post/list.vue"; 
// 文章編輯頁
import Post from "./views/post/form.vue";
// 分類列表頁
import TypeList from "./views/post/type.vue";
// 標籤列表頁
import TagsList from "./views/post/tags.vue";
// 回收站
import TrashList from "./views/post/trash.vue";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "list",
      component: PostList
    },
    {
      path: "/post",
      name: "post",
      component: Post
    }...
  ]
});

複製程式碼

其他設定

1、 路由切換可直接使用muse-ui提供的動畫效果：

<mu-slide-left-transition>
   <router-view class="content"/>
</mu-slide-left-transition>
複製程式碼

2、左側導航設定可拖拽區(開發者工具開啟時，無法拖動，可關閉後測試) 在左側導航根節點增加drag樣式

.drag {
   -webkit-app-region: drag;
}
複製程式碼

部落格地址: alibt.top

更多精彩，請關注我的公眾號！