一个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动画,它动起来了