准备

引入vue-router与vue

必不可少:安装好vue-router
引入vue-router和vue

编写样式

html,body,#app {margin: 0;padding: 0px;height: 100%;}.header {height: 50px;background-color: #545c64;line-height: 50px;text-align: center;font-size: 24px;color: #fff;}.footer {height: 40px;line-height: 40px;background-color: #888;position: absolute;bottom: 0;width: 100%;text-align: center;color: #fff;}.main {display: flex;position: absolute;top: 50px;bottom: 40px;width: 100%;}.content {flex: 1;text-align: center;height: 100%;}.left {flex: 0 0 20%;background-color: #545c64;}.left a {color: white;text-decoration: none;}.right {margin: 5px;}.btns {width: 100%;height: 35px;line-height: 35px;background-color: #f5f5f5;text-align: left;padding-left: 10px;box-sizing: border-box;}button {height: 30px;background-color: #ecf5ff;border: 1px solid lightskyblue;font-size: 12px;padding: 0 20px;}.main-content {margin-top: 10px;}ul {margin: 0;padding: 0;list-style: none;}ul li {height: 45px;line-height: 45px;background-color: #a0a0a0;color: #fff;cursor: pointer;border-bottom: 1px solid #fff;}table {width: 100%;border-collapse: collapse;}td,th {border: 1px solid #eee;line-height: 35px;font-size: 12px;}th {background-color: #ddd;}

实现

HTML编写

<div id="app"><router-view></router-view></div>

创建组件

1、创建后台管理系统组件

 var app={template:`<div><!-- 头部区域 --><header class="header">后台管理系统</header><!-- 中间主体区域 --><div class="main"><!-- 左侧菜单栏 --><div class="content left"><ul><li><router-link to="/users">用户管理</router-link></li><li><router-link to="/rights">权限管理</router-link></li><li><router-link to="/goods">商品管理</router-link></li><li><router-link to="/orders">订单管理</router-link></li><li><router-link to="/settings">系统设置</router-link></li></ul></div><!-- 右侧内容区域 --><div class="content right"><div class="main-content"><router-view /></div></div></div></div><!-- 尾部区域 --><footer class="footer">版权信息</footer></div><!-- 路由占位符 --><router-view></router-view>`}

2、创建用户管理区域组件

数据是固定的,用于测试

var users={data:function(){return{users:[{id:1,uname:'张三',age:10,cz:'详情'},{id:2,uname:'李四',age:20,cz:'详情'},{id:3,uname:'王五',age:30,cz:'详情'},{id:4,uname:'赵六',age:40,cz:'详情'}]}},template:`<div><h1>用户管理区域</h1> <table><tr><th>编号</th><th>姓名</th><th>年龄</th><th>操作</th></tr> <tr v-for="item in users" :key="item.id"><td>{{item.id}}</td><td>{{item.uname}}</td><td>{{item.age}}</td><td><router-link :to="/msg/+item.id"><a href="#">{{item.cz}}</a></router-link></td></tr> </table></div>`}

2.1、 创建二级详情页面组件

var msg={template:`<div><h1>您当前得到的信息为:id={{$route.params.id}}</h1><button οnclick="javascript:history.go(-1)">返回</button></div>`}

3、 创建权限管理组件

 var qx={template:`<h1>权限管理</h1>`}

4、创建商品管理组件

var goods={template:`<h1>商品管理</h1>`}

5、创建订单管理组件

 var orders={template:`<h1>订单管理</h1>`}

6、 创建系统设置组件

 var settings={template:`<h1>系统设置</h1>`}

以上组件可根据自己的需求更改

创建路由对象并且进行挂载

var router=new VueRouter({routes:[{path:'/',component:app,children:[{path:'/',redirect:'/users'}, //redirect重定向{path:'/users',component:users},{path:'/rights',component:qx},{path:'/goods',component:goods},{path:'/orders',component:orders},{path:'/settings',component:settings},{path:'/msg/:id',component:msg}]}]}); var vm=new Vue({el:"#app",router:router})

效果图

图1

图2(详情页)

成功实现~