vue-router，A頁面跳轉B頁面。沒有完全跳轉，是把B頁面內容追加到了A頁面上，這是什么原因呢？

A頁面

<template>
    <div class="profile_page">
        <header-top />

        <section>        

            <section class="profile-button-group">
                <van-row gutter="10">
                    <van-col span="10" offset="1">
                        <router-link :to="{path: '/profile/recharge'}">
                            <van-button size="large" >跳轉B頁面</van-button>
                        </router-link>
                    </van-col>
                    
                </van-row>
            </section>
        </section>
        <footer-guide />

        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
</template>


<script type="text/babel">
    export default {
        data(){
            return {

            }
        }
    }
</script>

B頁面

<template>
    <div class="recharge_page">

        <section>

            <section >
                PAGE B
            </section>


        </section>

    </div>

</template>


<script type="text/babel">

    export default {
        data(){
            return {

            }
        },
        created(){
            console.log('page B created');
        }
    }
</script>

<style>

</style>

為什么頁面沒有完全跳轉到 B.vue? 而是把B.vue的html追加到了A.vue呢？