html+js源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue-5</title>
<script src="./vue.js"></script>
<script src="./axios.js"></script>
<script src="./vue-router.js"></script>
<link rel="stylesheet" href="./vue-5style.css">
</head>
<body>
<div id="app">
<!-- 路由站位符 -->
<router-view></router-view>
</div>
<script>
const App={
template:`
<div>
<h1>传智后台管理系统</h1>
<div id="left">
<ul>
<li><router-link to="/user">用户管理</router-link></li>
<li><router-link to="/power">权限管理</router-link></li>
<li><router-link to="/goods">商品管理</router-link></li>
<li><router-link to="/order">订单管理</router-link></li>
<li><router-link to="/sys">系统设置</router-link></li>
</ul>
</div>
<div id="right">
<router-view></router-view>
</div>
</div>
`
}
const user={
template:`
<div>
<h2>用户管理列表</h2>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in info"><td>{{item.id}}</td><td>{{item.name}}</td>
<td>{{item.age}}</td><td><a href="#" @click="detail(item.id)">详情</a></td></tr>
</tbody>
</div>
`,
data(){
return {
info:[{id:1,name:"liuliu",age:18},
{id:2,name:"木木",age:17},
{id:3,name:"lily",age:19}]
}
},
methods:{
detail:function(id){
this.$router.push("/detail/"+id)
}
}
}
const detail={
props:["id"],
template:`
<div>
<h3>用户ID为: {{id}}</h3>
<button @click="goBack">返回</button>
</div>`,
methods:{
goBack:function(){
this.$router.go(-1);
}
}
}
const power={
template:`<h2>我是权限管理</h2>`
}
const order={
template:`<h2>我是订单管理</h2>`
}
const goods={
template:`<h2>我是商品管理</h2>`
}
const sys={
template:`<h2>我是系统设置</h2>`
}
const router = new VueRouter({
routes:[
{path:"/",component:App,redirect:"/user",children:[
{path:"/user",component:user},
{path:"/detail/:id",component:detail,props:true},
{path:"/power",component:power},
{path:"/goods",component:goods},
{path:"/order",component:order},
{path:"/sys",component:sys},
]}
]
})
const vm = new Vue({
el:"#app",
data:{
},
router:router
})
</script>
</body>
</html>
css样式
*{
margin: 0;
padding: 0;
}
h1{
text-align: center;
background-color: darkslategray;
}
#left{
width: 10%;
background-color: darkgrey;
height: 80vh;
float: left;
}
#left>ul>li{
width: 100%;
height: 50px;
list-style: none;
font-size: large;
background-color: firebrick;
text-align: center;
line-height: 50px;
border: 1px wheat solid;
cursor: pointer;
}
a,h1{
color: white;
}
h2,h3{
text-align: center;
}
#right{
width: 90%;
float: right;
background-color: rgb(245, 189, 245);
}
table{
border-collapse: collapse;
margin: 20px auto;
}
td,th{
width: 200px;
text-align: center;
height: 50px;
line-height: 50px;
border: 1px black solid;
}
button{
margin: 50px auto;
display: block;
width: 100px;
height: 30px;
border-radius: 5px;
background: linear-gradient(blue,pink);
}
