1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <script src="../../js/vue.js"></script> 9 <script src="../../js/vue-router.js"></script> 10 </head> 11 <style> 12 .myactive { 13 color: red; 14 font-size: 24px; 15 } 16 17 html body h1 { 18 margin: 0; 19 padding: 0 20 } 21 22 .header { 23 background-color: orange; 24 } 25 26 .container { 27 display: flex; 28 } 29 30 .left { 31 flex: 2; 32 background-color: red; 33 } 34 35 .main { 36 flex: 8; 37 background-color: green; 38 } 39 </style> 40 41 <body> 42 <div id="app"> 43 <!-- 命名试图实现经典布局--> 44 45 46 <router-view></router-view> 47 <div class="container"> 48 <router-view name='left'></router-view> 49 <!-- 设置了 name属性的router-view 只有在routes components中配置为【left：组件名】的组件才会展示到这里 --> 50 <router-view name='main'></router-view> 51 </div> 52 <router-view name='bottom'></router-view> 53 54 55 56 57 58 59 60 61 </div> 62 63 64 </body> 65 <script> 66 Vue.config.devtools = true; 67 //vue-rourer.js 被引入后，window全局就会多了一个VueRouter这样一个构造函数，可以new 一个路由配置实例 68 let comobj1 = { 69 template: '<h1 class="header">这是header</h1>', 70 created() { 71 console.log(this.$route.query) //vue-router 提供的用于访问url参数 72 } 73 } 74 let comobj2 = { 75 template: '<h1 class="left">这是左侧nav</h1>', 76 created() { 77 console.log(this.$route) 78 } 79 } 80 let comobj3 = { 81 template: '<h1 class="main">这是主体</h2>', 82 created() { 83 console.log(this.$route) 84 } 85 } 86 let comobj4 = { 87 template: '<h1 class="main">这是底部</h2>', 88 created() { 89 console.log(this.$route) 90 } 91 } 92 93 94 95 let routerobj = new VueRouter({ 96 routes: [ //注意此处为 routes 不是 routers 97 { 98 path: '/', 99 components: { //此处除了可以用component指定展示特定的组件外，还可以使用components对象来展示若干组件 100 'default': comobj1, //router-view 默认展示键为default的组件 101 'left': comobj2, //router-view 命名 name='left'，就会展示这个comobj2组件 102 'main': comobj3, ////router-view 命名 name='main'，就会展示这个comobj3组件 103 'bottom': comobj4, 104 } 105 }, 106 107 ] 108 109 }) 110 111 let vm = new Vue({ 112 el: '#app', 113 data: { 114 115 }, 116 methods: { 117 118 }, 119 120 router: routerobj //将路由实例与vue实例关联起来，注册路由实例 121 }) 122 </script> 123 124 </html>
总结：命名视图使用场景，当一个路由规则匹配成功，想要展示多个组件的时候，命名视图就很适合做这份差事！