欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue 后端管理框架模板

程序员文章站 2022-07-04 19:26:41
自己的项目需要一个后端管理框架,于是在网上找了一堆,但是发现其他的功能都很丰富,但是自己用不上,我就需要一个简单的框架,页面内容自己搭建,所以自己借鉴其他优秀的模板样式,花了一天手撸了一个简单的架构出来,方便自己以后使用vue管理后台前端框架纯vue编写,页面简单,功能实用,入手无门槛实现功能路由中间件面包屑导航栏全局路由与子路由互相跳转效果展示demo地址http://admin.zozoo.net/home中间件设置/src/router/index.js//路由中间...

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

vue管理后台前端框架

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

实现功能

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

效果展示

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

相关标签: 个人博客 vue