欢迎光临
我的个人博客网站

命名视图-实现一个路由规则展示多个组件!!!

  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>

总结:命名视图使用场景,当一个路由规则匹配成功,想要展示多个组件的时候,命名视图就很适合做这份差事!

赞(0) 打赏
未经允许不得转载:张拓的天空 » 命名视图-实现一个路由规则展示多个组件!!!
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏