235 lines
5.6 KiB
HTML
235 lines
5.6 KiB
HTML
|
<!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 id="app">
|
|||
|
|
<router-view></router-view>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
|
|||
|
|
|
|||
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.5/lib/theme-chalk/index.css">
|
|||
|
|
|
|||
|
|
<script src="https://unpkg.com/element-ui@2.15.5/lib/index.js"></script>
|
|||
|
|
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
const App = {
|
|||
|
|
template:`
|
|||
|
|
<div>
|
|||
|
|
<!-- 头部区域 -->
|
|||
|
|
<header class="header">传智后台管理系统</header>
|
|||
|
|
<!-- 中间主体区域 -->
|
|||
|
|
<div class="main">
|
|||
|
|
<!-- 左侧菜单栏 -->
|
|||
|
|
<div class="content left">
|
|||
|
|
<ul>
|
|||
|
|
<router-link tag="li" to="/user">用户管理</router-link>
|
|||
|
|
<router-link tag="li" to="/rights">权限管理</router-link>
|
|||
|
|
<router-link tag="li" to="/goods">商品管理</router-link>
|
|||
|
|
<router-link tag="li" to="/order">订单管理</router-link>
|
|||
|
|
<router-link tag="li" to="/setting">系统设置</router-link>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<!-- 右侧内容区域 -->
|
|||
|
|
<div class="content right">
|
|||
|
|
<div class="main-content">
|
|||
|
|
<router-view></router-view>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 尾部区域 -->
|
|||
|
|
<footer class="footer">版权信息</footer>
|
|||
|
|
</div>
|
|||
|
|
`
|
|||
|
|
}
|
|||
|
|
// user组件
|
|||
|
|
const User = {
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
userlist: [
|
|||
|
|
{ id: 1, name: '张三', age: 10 },
|
|||
|
|
{ id: 2, name: '李四', age: 20 },
|
|||
|
|
{ id: 3, name: '王五', age: 30 },
|
|||
|
|
{ id: 4, name: '赵六', age: 40 }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
template:`
|
|||
|
|
<div>
|
|||
|
|
<h2>用户管理区域</h2>
|
|||
|
|
<table>
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>编号</th>
|
|||
|
|
<th>姓名</th>
|
|||
|
|
<th>年龄</th>
|
|||
|
|
<th>操作</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr v-for="item in userlist" :key="item.id">
|
|||
|
|
<td>{{ item.id }}</td>
|
|||
|
|
<td>{{ item.name }}</td>
|
|||
|
|
<td>{{ item.age }} </td>
|
|||
|
|
<td><a href="javascript:;" @click="goDetail(item.id)">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
`,
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
goDetail (id) {
|
|||
|
|
this.$router.push('/detail/'+id)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// rights组件
|
|||
|
|
const Rights = {
|
|||
|
|
template:`
|
|||
|
|
<div>
|
|||
|
|
权限组件
|
|||
|
|
</div>
|
|||
|
|
`
|
|||
|
|
}
|
|||
|
|
// 详情组件
|
|||
|
|
const Detail = {
|
|||
|
|
props:['id'],
|
|||
|
|
template:`
|
|||
|
|
<div>
|
|||
|
|
用户详情 {{ id }}
|
|||
|
|
<button @click="goBack">后退</button>
|
|||
|
|
</div>
|
|||
|
|
`,
|
|||
|
|
methods: {
|
|||
|
|
goBack () {
|
|||
|
|
this.$router.go(-1)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 通过VueRouter配置路由规则
|
|||
|
|
var router = new VueRouter({
|
|||
|
|
routes:[
|
|||
|
|
// 每一个路由规则,当这一行写完，发现没有App组件
|
|||
|
|
{
|
|||
|
|
path:'/',
|
|||
|
|
redirect:'/user',
|
|||
|
|
component:App,
|
|||
|
|
children:[
|
|||
|
|
{ path:'/user', component:User },
|
|||
|
|
{ path:'/rights', component:Rights },
|
|||
|
|
{ path:'/detail/:id', component:Detail,props:true }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
new Vue({
|
|||
|
|
el:'#app',
|
|||
|
|
router
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|