自己的项目需要一个后端管理框架，于是在网上找了一堆，但是发现其他的功能都很丰富，但是自己用不上，我就需要一个简单的框架，页面内容自己搭建，所以自己借鉴其他优秀的模板样式，花了一天手撸了一个简单的架构出来，方便自己以后使用

vue管理后台前端框架

纯vue编写，页面简单，功能实用，入手无门槛

实现功能

• 路由中间件
• 面包屑导航栏
• 全局路由与子路由互相跳转

效果展示

demo地址

http://admin.zozoo.net/home

项目地址

https://github.com/ganganlee/vueAdminLayout.git

中间件设置

/src/router/index.js

//路由中间件
route.beforeEach((to,from,next)=>{
  let token = $cookies.get('token');
  //验证用户是否登陆
  if(!token && to.path !== '/login'){
    next('/login');
  }else {
    next();
  }
});

路由设置

/src/router/index.js

菜单栏设置(子菜单设置完成后，还需设置路由才能完成跳转)

/src/components/Index.vue

服务器配置

https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

本文地址：https://blog.csdn.net/weixin_44540711/article/details/109616019