文章目录
一、前言
下面是一个基于路由的后台管理的案例，页面效果如下，我们按步骤实现一下：
实现的功能：
1、点击左侧的"用户管理",“权限管理”,“商品管理”,“订单管理”,"系统设置"都会出现对应的组件并展示内容
2、其中"用户管理"组件展示的效果如上图所示，在用户管理区域中的详情链接也是可以点击的，点击之后将会显示用户详情信息。
一、抽离并渲染 App 根组件
1、这个页面已经把后台管理页面的基本布局实现了，如下，我们直接使用；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>基于vue-router的案例</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<div>
<!-- 头部区域 -->
<header class="header">传智后台管理系统</header>
<!-- 中间主体区域 -->
<div class="main">
<!-- 左侧菜单栏 -->
<div class="content left">
<ul>
<li>用户管理</li>
<li>权限管理</li>
<li>商品管理</li>
<li>订单管理</li>
<li>系统设置</li>
</ul>
</div>
<!-- 右侧内容区域 -->
<div class="content right"><div class="main-content">添加用户表单</div></div>
</div>
<!-- 尾部区域 -->
<footer class="footer">版权信息</footer>
</div>
</body>
</html>
2、在页面中引入vue，vue-router；
引入包的script标签一般定义在head标签中
3、创建Vue实例对象，准备开始编写代码实现功能；
创建Vue实例的script标签一般定义在body标签的结尾处
4、希望是通过组件的形式展示页面的主体内容，而不是写死页面结构，所以我们可以定义一个根组件：
//只需要把原本页面中的html代码设置为组件中的模板内容即可
const app = {
template:`<div>
<!-- 头部区域 -->
<header class="header">传智后台管理系统</header>
<!-- 中间主体区域 -->
<div class="main">
<!-- 左侧菜单栏 -->
<div class="content left">
<ul>
<li>用户管理</li>
<li>权限管理</li>
<li>商品管理</li>
<li>订单管理</li>
<li>系统设置</li>
</ul>
</div>
<!-- 右侧内容区域 -->
<div class="content right">
<div class="main-content">添加用户表单</div>
</div>
</div>
<!-- 尾部区域 -->
<footer class="footer">版权信息</footer>
</div>`
}
5、当我们访问页面的时候，默认需要展示刚刚创建的app根组件，我们可以创建一个路由对象来完成这个事情,然后将路由挂载到Vue实例对象中即可：
// 定义路由对象
const router = new VueRouter({
routes: [
{path:"/",component:App}
]
})
// 定义App根组件
var vm = new Vue({
el:"#app",
data:{
},
// 挂载路由对象
router
})
当然，还需要一个路由占位符：
<div id="app">
<!--定义路由占位符-->
<router-view></router-view>
</div>
效果如下：
二、将左侧菜单改造为路由链接
我们需要在这个根组件中继续路由实现其他的功能子组件，先让我们更改根组件中的模板，更改左侧li为子级路由链接：
const 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">添加用户表单</div></div>
</div>
<footer class="footer">版权信息</footer>
</div>
`
};
三、创建左侧菜单对应的路由组件
const User = {
template: `
<div>
<h1>用户管理区域</h1>
</div>
`
};
const Rights = {
template: `
<div>
<h1>权限管理区域</h1>
</div>
`
};
const Goods = {
template: `
<div>
<h1>商品管理区域</h1>
</div>
`
};
const Orders = {
template: `
<div>
<h1>订单管理区域</h1>
</div>
`
};
const Settings = {
template: `
<div>
<h1>系统设置区域</h1>
</div>
`
};
四、在右侧主体区域添加路由占位符
整个页面属于根组件，在根组件对应的页面中添加路由占位符：
const app = {
template:`<div>
........
<div class="main">
<!-- 左侧菜单栏 -->
<div class="content left">
<ul>
<!-- 注意：我们把所有li都修改为了路由链接 -->
<li><router-link to="/users">用户管理</router-link></li>
<li><router-link to="/accesses">权限管理</router-link></li>
<li><router-link to="/goods">商品管理</router-link></li>
<li><router-link to="/orders">订单管理</router-link></li>
<li><router-link to="/systems">系统设置</router-link></li>
</ul>
</div>
<!-- 右侧内容区域 -->
<div class="content right">
<div class="main-content">
<!-- 路由占位符 -->
<router-view></router-view>
</div>
</div>
</div>
.......
</div>`
}
五、添加子路由规则
子路由规则作为根组件的子路由规则：
// 定义路由对象
const router = new VueRouter({
routes: [
{path:"/",component:App,children:[
{path:"/users",component: User},
{path:"/rights",component: Rights},
{path:"/goods",component: Goods},
{path:"/orders",component: Orders},
{path:"/settings",component: Settings},
]}
]
})
六、通过路由重定向默认渲染用户组件
当用户访问根路径时，重定向到“/users”:
// 定义路由对象
const router = new VueRouter({
routes: [
// 路由重定向
{path:"/",component:App,redirect:"/users",children:[
{path:"/users",component: User},
{path:"/rights",component: Rights},
{path:"/goods",component: Goods},
{path:"/orders",component: Orders},
{path:"/settings",component: Settings},
]}
]
})
七、渲染用户列表数据
为Users组件添加私有数据,并在模板中循环展示私有数据：
const User = {
data(){
return{
userList:[
{id:1,name:"zs",age:18},
{id:2,name:"ls",age:19},
{id:3,name:"wang",age:20},
{id:4,name:"jack",age:21},
]
}
},
template: `
<div>
<h1>用户管理区域</h1>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key="item.id" v-for="item in userList">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td><a href="javascript:;">详情</a></td>
</tr>
</tbody>
</table>
</div>
`
};
八、需要创建一个组件，用来展示详情信息
当我们点击详情时，应该是用户列表页没了，而展示的是用户详情页，所以，用户详情页应该是和用户列表页并列的等级。
详情组件：
const UserInfo = {
template:`
<div>
<h5>用户详情</h5>
</div>
`
}
路由规则：
// 定义路由对象
const router = new VueRouter({
routes: [
// 路由重定向
{path:"/",component:App,redirect:"/users",children:[
{path:"/users",component: User},
{path:"/userInfo",component: UserInfo},
{path:"/rights",component: Rights},
{path:"/goods",component: Goods},
{path:"/orders",component: Orders},
{path:"/settings",component: Settings},
]}
]
})
九、编程式导航，点详情链接跳转至详情组件
路由传参：
// 定义路由对象
const router = new VueRouter({
routes: [
// 路由重定向
{path:"/",component:App,redirect:"/users",children:[
{path:"/users",component: User},
{path:"/userInfo/:id",component: UserInfo, props:true},
{path:"/rights",component: Rights},
{path:"/goods",component: Goods},
{path:"/orders",component: Orders},
{path:"/settings",component: Settings},
]}
]
})
const UserInfo = {
props:["id"],
template:`
<div>
<h5>用户详情--- 用户id为{{id}}</h5>
</div>
`
};
回退按钮：
const UserInfo = {
props:["id"],
template:`
<div>
<h5>用户详情--- 用户id为{{id}}</h5>
<button @click="goBack">回退</button>
</div>
`,
methods: {
goBack(){
this.$router.go(-1);
}
}
};
效果如下：
十、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>基于vue-router的案例</title>
<style type="text/css">
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;
}
</style>
<script src="js/vue.js"></script>
<script src="js/vue-router_3.0.2.js"></script>
</head>
<body>
<div id="app">
<!--定义路由占位符-->
<router-view></router-view>
</div>
<script>
const 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></router-view></div></div>
</div>
<footer class="footer">版权信息</footer>
</div>
`
};
const User = {
data(){
return{
userList:[
{id:1,name:"zs",age:18},
{id:2,name:"ls",age:19},
{id:3,name:"wang",age:20},
{id:4,name:"jack",age:21},
]
}
},
methods:{
goUserInfo(id) {
this.$router.push("/userInfo/" + id )
}
},
template: `
<div>
<h1>用户管理区域</h1>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key="item.id" v-for="item in userList">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td><a href="javascript:;" @click="goUserInfo(item.id)">详情</a></td>
</tr>
</tbody>
</table>
</div>
`
};
const UserInfo = {
props:["id"],
template:`
<div>
<h5>用户详情--- 用户id为{{id}}</h5>
<button @click="goBack">回退</button>
</div>
`,
methods: {
goBack(){
this.$router.go(-1);
}
}
};
const Rights = {
template: `
<div>
<h1>权限管理区域</h1>
</div>
`
};
const Goods = {
template: `
<div>
<h1>商品管理区域</h1>
</div>
`
};
const Orders = {
template: `
<div>
<h1>订单管理区域</h1>
</div>
`
};
const Settings = {
template: `
<div>
<h1>系统设置区域</h1>
</div>
`
};
// 定义路由对象
const router = new VueRouter({
routes: [
// 路由重定向
{path:"/",component:App,redirect:"/users",children:[
{path:"/users",component: User},
{path:"/userInfo/:id",component: UserInfo, props:true},
{path:"/rights",component: Rights},
{path:"/goods",component: Goods},
{path:"/orders",component: Orders},
{path:"/settings",component: Settings},
]}
]
})
// 定义App根组件
var vm = new Vue({
el:"#app",
data:{
},
// 挂载路由对象
router
})
</script>
</body>
</html>
1132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
