vue中使用命名视图，在一个页面显示多个视图

梦里梦外; 2023-07-18 02:59 32阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70][]

先看效果：三块有颜色的Foo页面，Bar页面，baz页面  分别由不同的视图渲染出来，每个视图渲染一个组件； 但是路由却是一个；即一个路由下有三个视图，每个视图渲染一个组件；

配置如下：

路由配置

{
        name:'my', 
        path:'/my',
        component: () => import('../views/my.vue'),
        redirect: '/my/namedView',// 表示进入/my时重定向到/my/namedView，这样进入/my时第一个子组件就显示了
        children: [ 
          {
            name:'namedView', 
            path:'/my/namedView',
            components:{
              default:() => import('../views/comp/Foo.vue'),
              a:() => import('../views/comp/Bar.vue'),
              b:() => import('../views/comp/Baz.vue')
            }
          } ,
          {
            name:'namedView2', 
            path:'/my/namedView2',
            components:{
              default:() => import('../views/comp/Foo2.vue'),
              a:() => import('../views/comp/Bar2.vue'),
              b:() => import('../views/comp/Baz2.vue')
            }
          } 
        ]
      }

.vue文件配置：

<template>
      <div>
        <div>我的页面</div> 
        <router-link to="namedView">命名视图组合一</router-link>  |  
        <router-link :to="{path:'/my/namedView2'}">命名视图组合二</router-link>
        <br />下面有视图三个，有一个是默认命名的，两个是重新命名的====》配置好命名视图，路由中配置好组件，可以让不同的组件显示在不同的路由中；
        
        <router-view class="view one"></router-view>
        
        <router-view class="view two" name="a"></router-view>
        
        <router-view class="view three" name="b"></router-view>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {};
      }
    };
    </script>
    <style lang='scss' scoped>
    .one {width: 100%;height: 100px;border: 1px solid red;background:skyblue;}
    .two {width: 20%;height: 300px;float: left;border: 1px solid blue;background:salmon;}
    .three {width: 80%;height: 300px;float: right;border: 1px solid orange;background:chartreuse;}
    </style>

代码地址： [https://github.com/yindong999/Vue-demo.git][https_github.com_yindong999_Vue-demo.git]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70]: /images/20230528/638aa58c177d446cb21c7d16d6ed78a3.png
[https_github.com_yindong999_Vue-demo.git]: https://github.com/yindong999/Vue-demo.git