命名视图-实现一个路由规则展示多个组件！！！
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>Documenttitle> 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 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: '这是header
', 70 created() { 71 console.log(this.$route.query) //vue-router 提供的用于访问url参数 72 } 73 } 74 let comobj2 = { 75 template: '这是左侧nav
', 76 created() { 77 console.log(this.$route) 78 } 79 } 80 let comobj3 = { 81 template: '这是主体
', 82 created() { 83 console.log(this.$route) 84 } 85 } 86 let comobj4 = { 87 template: '这是底部
', 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>
总结：命名视图使用场景，当一个路由规则匹配成功，想要展示多个组件的时候，命名视图就很适合做这份差事！