vue路由—实现经典布局（同一个路由，对应多个组件）

最新推荐文章于 2024-05-24 14:36:36 发布

何迟

最新推荐文章于 2024-05-24 14:36:36 发布

阅读量8.7k

点赞数 2

分类专栏： Vue 前端开发也蛮有意思的

本文链接：https://blog.csdn.net/qq_42036616/article/details/82976912

版权

前端开发也蛮有意思的同时被 2 个专栏收录

82 篇文章 5 订阅

订阅专栏

Vue

31 篇文章 0 订阅

订阅专栏

要点：

1.router-view头部，侧边栏，主体内容区域三个区域，每个有一个占位符。

2.占位符定义一个name属性，跟components的第一个属性对应，这里component使用复数，同一个路由下匹配多个组件。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
    
    <style>
        .header{
            margin-top: 25px;
            background-color: gray;
            height: 125px;
        }
        .container{
            display:flex;
            /*flex左右布局,一共十份，bootstrap的栅格12份*/
            height: 575px;
        }
        .left{
            background-color: gainsboro;
            flex: 2.5;
        }
        .main{
            background-color: honeydew;
            flex: 7.5;
        }
        
        h1{
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>
<body>
      <div id="app">
          
          <router-view></router-view>
          
          <div class="container">
              <router-view name="left"></router-view>
              <router-view name="main"></router-view>
          </div>
          <!--头部，侧边栏，主体内容区域三个区域，每个有一个占位符-->
          <!--name是为了将components中的多个组件一一对应起来-->
          
      </div>

      <script>
          
          var header = {
              template: '<h1 class="header">head头部区域</h1>'
          };
          
          var leftNav = {
              template: '<h1 class="left">left侧边栏</h1>'  
          };
          
          var mainContent = {
              template: '<h1 class="main">main主体内容</h1>'
          };
          
          var router = new VueRouter({
             routes:[
                 {path:'/', components:{
                     default:header,
                     'left':leftNav,
                     'main':mainContent
                 }}
                 //这里使用复数components，第一个属性与router-view中的name对应，第二个是表示要展示的组件名字    
             ] 
          });
          
          
          
          var vm = new Vue({
             el:'#app',
             router
          });
      </script>
</body>
</html>

效果：

何迟

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
vue路由—实现经典布局（同一个路由，对应多个组件）

要点：1.router-view头部，侧边栏，主体内容区域三个区域，每个有一个占位符。2.占位符定义一个name属性，跟components的第一个属性对应，这里component使用复数，同一个路由下匹配多个组件。HTML代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta chars...
复制链接

扫一扫