vue-router在不同頁面公用相同組件的顯示問題

我是初次接觸 vue-router ，我想問下，當在APP.vue 布局下：

   <router-link to="/LoginPage"  style="display: block"  class="fontSizelogin"> 登錄 </router-link>
<router-view/>
<router-view name="CjBar"></router-view>
<router-view name="ZouMaDeng"></router-view>

當我去到 LoginPage頁面的時候， 里面也有 組件 CjBar 和 ZouMaDeng ，如下圖：

<template>

<div>
    You login  here?。?！
    <router-view  name="ZouMaDeng"></router-view>
    <router-view name="CjBar"></router-view>
</div>

</template>
但是我希望 這兩個組件在 B頁面的顯示效果 和主 入口APP.vue 是 相反的。怎么弄?現(xiàn)在 顯示效果是 先出CjBar，然后是 ZouMaDeng ，我希望相反！