VueRouter案列
案列内容，包含，模板，路由传参，路由重定向，路由嵌套，能够复习路由基本使用，成果如图：
完整代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <title>基于vue-router的案例</title> 7 <style type="text/css"> 8 html, 9 body, 10 #app { 11 margin: 0; 12 padding: 0px; 13 height: 100%; 14 } 15 16 .header { 17 height: 50px; 18 background-color: #545c64; 19 line-height: 50px; 20 text-align: center; 21 font-size: 24px; 22 color: #fff; 23 } 24 25 .footer { 26 height: 40px; 27 line-height: 40px; 28 background-color: #888; 29 position: absolute; 30 bottom: 0; 31 width: 100%; 32 text-align: center; 33 color: #fff; 34 } 35 36 .main { 37 display: flex; 38 position: absolute; 39 top: 50px; 40 bottom: 40px; 41 width: 100%; 42 } 43 44 .content { 45 flex: 1; 46 text-align: center; 47 height: 100%; 48 } 49 50 .left { 51 flex: 0 0 20%; 52 background-color: #545c64; 53 } 54 55 .left a { 56 color: white; 57 text-decoration: none; 58 } 59 60 .right { 61 margin: 5px; 62 } 63 64 .btns { 65 width: 100%; 66 height: 35px; 67 line-height: 35px; 68 background-color: #f5f5f5; 69 text-align: left; 70 padding-left: 10px; 71 box-sizing: border-box; 72 } 73 74 button { 75 height: 30px; 76 background-color: #ecf5ff; 77 border: 1px solid lightskyblue; 78 font-size: 12px; 79 padding: 0 20px; 80 } 81 82 .main-content { 83 margin-top: 10px; 84 } 85 86 ul { 87 margin: 0; 88 padding: 0; 89 list-style: none; 90 } 91 92 ul li { 93 height: 45px; 94 line-height: 45px; 95 background-color: #a0a0a0; 96 color: #fff; 97 cursor: pointer; 98 border-bottom: 1px solid #fff; 99 } 100 101 table { 102 width: 100%; 103 border-collapse: collapse; 104 } 105 106 td, 107 th { 108 border: 1px solid #eee; 109 line-height: 35px; 110 font-size: 12px; 111 } 112 113 th { 114 background-color: #ddd; 115 } 116 </style> 117 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 118 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 119 </head> 120 121 <body> 122 <div class="app"> 123 124 <a href=""></a> 125 <router-view></router-view> 126 127 </div> 128 <script> 129 var info = { 130 props: ['id'], 131 template: '<div>用户id为{{id}}<button @click="go">返回</button></div>', 132 methods: { 133 go() { 134 this.$router.go(-1) 135 } 136 } 137 } 138 var a = { 139 template: '<div><!-- 头部区域 --><header class="header">后台管理系统</header><!-- 中间主体区域 --><div class="main"><!-- 左侧菜单栏 --><div class="content left"><ul><li><router-link to="/master1">用户管理</router-link></li><li><router-link to="/master2">权限管理</router-link></li><li><router-link to="/master3">商品管理</router-link></li><li><router-link to="/master4">订单管理</router-link></li><li><router-link to="/master5">系统设置</router-link></li></ul></div><!-- 右侧内容区域 --><div class="content right"><div class="main-content"><router-view /></div></div></div><!-- 尾部区域 --><footer class="footer">版权信息</footer></div>' 140 } 141 var master1 = { 142 data() { 143 return { 144 userlist: [ 145 { 146 id: 1, name: 'zs', age: 13 147 }, 148 { 149 id: 2, name: 'ls', age: 17 150 }, 151 { 152 id: 3, name: 'ww', age: 15 153 }, 154 { 155 id: 4, name: 'ds', age: 33 156 }, 157 ] 158 } 159 160 }, 161 methods: { 162 go: function (id) { 163 this.$router.push('/info/' + id) 164 }, 165 }, 166 167 template: '<div><div>用户管理</div><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="#" @click=go(item.id)>详细</a></td></tr></tbody></table></div>' 168 } 169 var master2 = { 170 template: '<div>权限管理</div>' 171 } 172 var master3 = { 173 template: '<div>商品管理</div>' 174 } 175 var master4 = { 176 template: '<div>订单管理</div>' 177 } 178 var master5 = { 179 template: '<div>系统设置</div>' 180 } 181 182 var router = new VueRouter({ 183 routes: [ 184 { 185 path: '/', component: a, 186 redirect: '/master1',//路由重定向，默认先加载master1 187 children: [ 188 { path: '/', component: master1 }, 189 { path: '/master1', component: master1 }, 190 { path: '/master2', component: master2 }, 191 { path: '/master3', component: master3 }, 192 { path: '/master4', component: master4 }, 193 { path: '/master5', component: master5 }, 194 { path: '/info/:id', component: info, props: true } 195 ] 196 }, 197 198 199 ] 200 }) 201 var app = new Vue({ 202 el: '.app', 203 router: router, 204 components: { 205 206 } 207 }) 208 </script> 209 </body> 210 211 </html>
