vue使用命名视图实现同一路由拆分

「爱情、让人受尽委屈。」 2021-08-14 02:57 292阅读 0赞

### 何为命名视图？ ###

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。  
你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。  
如果 router-view 没有设置名字，那么默认为 default  
通俗点说：正常的一个网页，你想把当前页面拆分成多个部分，例如：左中右，那么在vue中我们可以通过简单的命名视图实现这一效果。

<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>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。  
确保正确使用 components 配置 (带上 s)

const router = new VueRouter({ 
      routes: [
        { 
          path: '/',
          components: { 
            default: Foo,
            a: Bar,
            b: Baz
          }
        }
      ]
    })

以上代码是vue官网中介绍的最简单的案例。  
当然了，既然拆分成多个部分，我们就可以结合动画实现各个部分不同的切换效果。  
示例：vue+animate.css+命名视图实现路由不同部分切换效果

*  router.js

const routes = [
      { 
        path: "/",
        name: "slot",
        component: slot
      },
      { 
        path: "/namedView",
        name: "namedView",
        components: { 
          ViewLeft: () => import("../components/namedViewLeft.vue"),
          ViewCenter: () => import("../components/namedViewCenter.vue"),
          ViewRight: () => import("../components/namedViewRight.vue")
        }
      }
    ];

*  app.vue

<template>
      <div id="app">
        <div id="nav">
          <router-link to="/home">主页</router-link> | 
          <router-link to="/namedView">命名视图</router-link> |
        </div>
        <router-view class="content" />
    
        <router-view class="namedViewLeft animated fadeInLeft" name="ViewLeft"></router-view>
    
        <router-view class="namedViewCenter animated bounceIn" name="ViewCenter"></router-view>
    
        <router-view class="namedViewRight animated fadeInRight" name="ViewRight"></router-view>
      </div>
    </template>
    
    <style> #app { width: 100%; height: 100%; overflow: hidden; } #nav { padding: 30px; width: 100%; height: 50px; text-align: center; line-height: 50px; font-size: 30px; background: skyblue; border-bottom: 3px solid #000; } #nav a { font-weight: bold; color: #2c3e50; } #nav a.router-link-exact-active { color: #42b983; } .content { width: 100%; height: calc(100% - 50px); text-align: center; background: skyblue; box-sizing: border-box; padding: 20px 0; } .namedViewLeft { width: 20%; height: calc(100% - 50px); float: left; box-sizing: border-box; border-right: 3px solid #000; } .namedViewCenter { width: 60%; height: calc(100% - 50px); float: left; } .namedViewRight { width: 20%; height: calc(100% - 50px); float: left; box-sizing: border-box; border-left: 3px solid #000; } </style>

*  main.js

// 引入animate.css
    import animated from "animate.css";
    Vue.use(animated);

效果图：  
![在这里插入图片描述][20200106130154663.gif]  
示例二：

*  app.vue

把路由分为更复杂的板块，实现更多的效果。  
以上，就是vue使用命名视图的使用方法。  
好了，如有问题，请指出，接受批评。  
个人微信公众号：  
![在这里插入图片描述][20200824114230991.png_pic_center]

[20200106130154663.gif]: /images/20210813/5962ecbac66c4ccba562ca66e5cbe88b.png
[20200824114230991.png_pic_center]: /images/20210813/66d6730aa69f420ca373aa0b8a6e36cf.png