vue-router小案例-后台管理路由

具体代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="js/vue.min.js"></script><script type="text/javascript" src="js/vue-router_3.0.2.js"></script><link rel="stylesheet" type="text/css" href="css/base.css"/><style type="text/css">.header{background: #545c64;height: 50px;font-size: 24px;line-height: 50px;text-align: center;color: #fff;}.main{display: flex;position: absolute;top: 50px;bottom: 40px;width: 100%;}.content{height: 100%;}.left{flex: 1;background-color: #545c64;}.left li{height: 45px;line-height: 45px;text-align: center;font-size: 16px;color: #FFFFFF;border-bottom: 1px solid #FFFFFF;background: #a0a0a0;cursor: pointer;}.left li:hover{background-color: #545c64;}.left li a{color: #ffffff;display: block;width: 100%;height: 100%;}.right{flex:4}.main-contain {padding: 5px;}.main-contain h1{text-align: center;margin: 20px 0;color: #000000;}.item-list ul{display: flex;}.item-list li{flex: 1;height: 35px;text-align: center;background-color: #ddd;line-height: 35px;font-size: 12px;border-right: 1px solid #ffffff;color: #000000;font-weight: 700;}.user-list ul{display: flex;}.user-list li{flex: 1;height: 35px;text-align: center;line-height: 35px;font-size: 12px;color: #000000;font-weight: 700;border: 1px solid #ddd;}.user-list li:nth-of-type(n+2){border-left: none;}.footer{position: fixed;bottom: 0;height: 40px;background-color: #888;width: 100%;text-align: center;line-height: 40px;color: #ffffff;font-size: 15px;}.btn{display: block;height: 40px;width: 50px;text-align: center;line-height: 40px;margin: 0 auto;font-size: 15px;border: 1px solid #ccc;border-radius: 25%;background: #46B8DA;}</style></head><body><div id="app"><div class="header">传智后台管理系统</div><div class="main"><div class="content left"><ul><li><router-link to="/user">用户管理</router-link></li><li><router-link to="/access">权限管理</router-link></li><li><router-link to="/commodities">商品管理</router-link></li><li><router-link to="/orderform">订单管理</router-link></li><li><router-link to="/setting">系统设置</router-link></li></ul></div><div class="content right"><!-- 占位符 --><router-view></router-view></div></div><div class="footer">版权信息</div></div><script type="text/javascript" src="js/vue.min.js"></script><script type="text/javascript" src="js/vue-router_3.0.2.js"></script><script type="text/javascript">const user={data(){return{userlist:[{id:1,name:'张三',age:12},{id:2,name:'李四',age:22},{id:3,name:'王二狗',age:13},{id:4,name:'龙傲天',age:44},]}    },template:`<div class="main-contain"><h1>用户管理区域</h1><div class="item-list"><ul><li>编号</li><li>姓名</li><li>年龄</li><li>操作</li></ul></div><div class="user-list"><ul v-for='item in userlist' :key='item.id'><li>{{item.id}}</li><li>{{item.name}}</li><li>{{item.age}}</li><li><a  href="javascript:" @click='go(item.id)'>详情</a></li>                           </ul></div></div>`,methods:{go:function(id){this.$router.push('/user/detail/'+id)}}}const detail={props:['id'],template:`<div class="main-contain"><h1>详情页面,且对应的id值为：{{id}}</h1><a @click='back' class="btn">后退</a></div>`,methods:{back:function(){//使用函数式编程控制路由跳转this.$router.go(-1)}}}const access={template:`<div class="main-contain"><h1>权限管理区域</h1></div>`}const commodities={template:`<div class="main-contain"><h1>商品管理区域</h1></div>`}const orderform={template:`<div class="main-contain"><h1>订单管理区域</h1></div>`}const setting={template:`<div class="main-contain"><h1>系统设置区域</h1></div>`}//配置路由规则并创建路由实例var router =new VueRouter({//所有的路由规则routes:[{path:'/',redirect:'/user'},{path:'/user',component:user},{path:'/access',component:access},{path:'/commodities',component:commodities},{path:'/orderform',component:orderform},{path:'/setting',component:setting},{path:'/user/detail/:id',component:detail,props:true},//匹配的哈希值，展示的对应组件名]})var vm= new Vue({el:'#app',data:{comName:'user'},components:{user,access,orderform,setting,setting},//挂载路由实例对象router})</script></body>
</html>

实现的效果：

vue-router小案例-后台管理路由相关推荐

Vue 电商PC后台管理(ElementUI)
Vue 电商PC后台管理(ElementUI) 1.项目概述 1.1电商项目基本业务概述根据不同的场景,电商系统一般都提供了PC端.移动 APP.移动 Web.微信小程序等多种终端访问方式. 1.2 ...
axios vue 回调函数_Vue 02 —— Vue 入门小案例~使用 Axios 中的GET、POST请求
作为后端攻城狮,写前端代码是一种什么体验? 相信不少人和 @Python大星一样,有写过前端代码的经历. 记录一下,Vue 框架开发中"啼笑皆非"的故事,非专业前端人员,该案例无 ...
Vue学习小案例--分页组件封装
文章目录 Vue学习小案例--分页组件封装修改成Vue(使用组件) Vue学习小案例–分页组件封装 index.html <!DOCTYPE html> <html lang=&q ...
一个基于 Go+Vue 实现的 openLDAP 后台管理项目
[公众号回复 "1024",免费领取程序员赚钱实操经验] 大家好,我是章鱼猫. 今天给大家推荐的这个开源你项目来自于读者的投稿.还挺不错的,分享给大家. 这个开源项目是基于Go+ ...
vue router返回到指定的路由
vue router返回到指定的路由一.项目场景二.问题描述三.原因分析四.解决方案一.项目场景项目场景:示例:A(商品详情)--B(商品购买页面)-C(支付成功页面)--D(订单页面) ...
[Vue.js] 路由 -- 基于vue-router的案例--后台管理
基于vue-router的案例感觉好多,啊啊啊!!! 实现效果实现步骤抽离并渲染App根组件将左侧菜单改造为路由链接创建左侧菜单对应的路由组件在右侧主体区域添加路由占位符添加子路由规则 ...
Vue Router的集中统一管理
一般我们在vue中配置路由都是这样的写法,一个一个的引入. 但是我们的项目是一个很多模块的项目,越到最后router.js 配置的路由就会越来越多.到最后我们就会变得很难以维护. 接下来我们就介绍一种 ...
vue+饿了么后台管理布局
项目用的vue-cli2 +element UI搭建目前布局的目录 src:assets //放置一些静态资源components:home //布局login //登录view //组件页面r ...
Vue Router系列之详解路由守卫
文章の目录 1.路由守卫是什么 2.导航守卫分类 2.1.全局守卫 2.1.1.全局前置守卫beforeEach 2.1.2.全局解析守卫beforeResolve(2.5.0 新增) 2.1.3.全 ...
PHP社区团购小程序后台管理设置
社区团购是一种全新的团购模式,适用于初创业或个人创业者,希望以低成本.高效益的方式开展本地电商业务,或者已经拥有线下实体店或实体店经验的商家,希望将线上业务扩展到社区团购平台,提升线上业务的营收. 下 ...

vue-router小案例-后台管理路由

vue-router小案例-后台管理路由相关推荐

最新文章

热门文章