[Learning record 12] VUE sets the route naming view

Two router-views are set in App.vue of a vue project, and different views are displayed according to different configurations. For example, passers-by A and B routes use the normal router-view, and another special passer-by (ADHD) C route uses one With animated routing.

1. Routing file settings, the general file path is router/index.js

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

*Pay attention to the difference between the above codes, the difference between the component setting of C routing and A, B, C routing with s ( components )

2. Use in 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>

Special reminder : the name="c" inthe above router-view and the lowercase c in components:{ c : C} inmust be the same . If it is used in the project, pay attention to the names of the two Want the same !

After the above settings are made, there will be no animation effect when jumping to pages a and b, and the slide animation we set will appear when jumping to page c, and it will start to move

 vue-router official website reference link