vue-router 跳转页面问题，请看详细描述

Question

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呢？

Answer 1

因为你的router-view是在a页面里面的，b页面加载是占用的routerview在a页面的位置,如果你要实现覆盖a页面的话，将b页面的整个页面设置css，因为看了人家的demo也是这样的，css代码：

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f2f2f2;
z-index: 202;
padding-top: 1.95rem;

Answer 2

https://router.vuejs.org/zh/a... 你需要理解一下文档

Answer 3

因为你的router-view是在a页面里面的呗，b页面加载是占用的routerview在a页面的那部分位置哦

Answer 4

原因可能是这个：

你这样写，应该是父子关系的路由才这么写。