[Vue基础实战]命名视图问题
参考代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>命名视图问题</title> <style> * { margin: 0px; padding: 0px; } .header { width: 100%; height: 70px; line-height: 70px; background-color: lightyellow; } .content { width: 100%; position: absolute; top: 70px; } .leftbar { width: 180px; height: 100px; background-color: lightgray; float: left; } .mainbox { width: 100%; height: 100px; background-color: rgb(233, 28, 28); float: right; margin-right: -180px; } </style> </head> <body> <div id="app"> <router-view></router-view> <div class="content"> <router-view name="leftbar"></router-view> <router-view name="mainbox"></router-view> </div> </div> <script src="../js/vue.js"></script> <script src="../js/vue-router.js"></script> <script> const headercst = Vue.component("headercom", { template: "<div class='header'>顶部导航</div>", }); const leftbarcst = Vue.component("leftbarcom", { template: "<div class='leftbar'>左侧导航</div>", }); const mainboxcst = Vue.component("mainboxcom", { template: "<div class='mainbox'>主内容</div>", }); const router = new VueRouter({ routes: [ { path: "/", components: { default: headercst, leftbar: leftbarcst, mainbox: mainboxcst, }, }, ], }); const app = new Vue({ el: "#app", router: router, }); </script> </body> </html>