(四)菜单导航及路由设置

页面编写如下,图标可使用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

更多精彩，请关注我的公众号！