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> |