HTML + javascript source code

<! 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"> <! <div> <script> const App={template: '<div> <h1> <div id="left"> < ul > < li > < the router - link to = "/ user" > user management < / router - the link > < / li > < li > < the router - link to = "/ power" > rights management < / router - the link > < / li > < li > < the router - link to = "/ goods" > commodity management < / router - the link > < / li > < li > < the router - link to = "/ order" > order management < / router - the link > < / li > < li > < the router - link to = "/ sys" > Settings < / router - the link > < / li > < / ul > < / div > < div id = "right" > < the router - the view > < / router - the view > < / div > < / div > `} const user = {template: ` < div > < h2 > user management list < / h2 > < table > < thead > < tr > < th > id < / th > < th > name < / th > < th > age < / th > < th > action < / th > < / tr > < thead > < tbody > < tr v - for = "item in the info" > < td > {{item. Id}} < / td > < td > {{item. The name}} < / td > < td > {{item. Age}} < / td > < td > < a href = "#" @ click = "detail (item. Id)" > detail < / a > < / td > < / tr > < / tbody > < / div > `, Data () {return {info: [{id: 1, name: "liuliu", the age: 18}, {id: 2, name: mywood, age: 17}, {id: 3, name: "lily", the age: 19}]}}, methods:{ detail:function(id){ this.$router.push("/detail/"+id) } } } const detail={ props:["id"], Template: '<div> <h3> {{id}} < / h3 > < button @ click = "goBack" > return < / button > < / div > `, the methods: {goBack: function () {this. $router. Go (1); }}} const goods={order={template: '<h2>'} const goods={goods: '</h2>'} Router = new VueRouter({routes:[routes:]) {route :[ {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>Copy the code

CSS styles

*{
    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);
}
Copy the code