【学习记录12】VUE设置路由命名视图

一个vue项目App.vue中设置两个router-view，根据不同的配置显示不同的视图，比如说：路人A,B路由使用正常的router-view，另一个特殊的路人（多动症）C 路由使用一个带动画路由。

一、路由文件设置，一般的文件路径都是router/index.js

const routes = [
  {
    path: '/a',
    component: A
  },
  {
    path: '/b',
    component: B
  },
  {
    path: '/c',
    components: {
      c: C
    }
  }
]

*注意上面代码的区别，C路由的component设置和A,B的区别，C路由带s（是components）

二、在App.vue中的使用

  <!-- 普通的router-view -->
  <router-view></router-view>


  <!-- 设置了命名视图的router-view，区别就是加上了name="c" -->
  <router-view name="c" v-slot="{ Component }">
    <transition appear name="slide">
      <component :is="Component"/>
    </transition>
  </router-view>

特别提醒：上面的router-view里的name="c"这里的小写c和路由设置当中components:{c: C}这里的小写c必须是相同的哦，如果是项目当中使用注意他俩的命名要一样！

当进行了上面的设置以后，跳转到a和b页面的时候无动画效果，跳转到c页面的时候会出现我们设置的slide动画，它动起来了

 vue-router官网参考链接