There is a problem with the vue-router jump page. Please see the detailed description.

vue-router,A page jumps to page B. Did not jump completely, is to append the content of the B page to the A page, what is the reason?

A page

<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 page

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

Why didn"t the page jump to B.vue completely? Instead, you append B.vue "s html to A.vue?


https://router.vuejs.org/zh/a. you need to understand the document


because your router-view is in page a, and the loading of page b occupies the position of routerview in page a


.

this may be the reason:

clipboard.png

if you write it this way, it should be the route of the father-son relationship.


because your router-view is in page a, and page b loads the position of routerview on page a, if you want to overwrite page a, set the whole page of page b to css, because it's the same with other people's demo. Css code:

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: -sharpf2f2f2;
z-index: 202;
padding-top: 1.95rem;
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e89c97-f85.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e89c97-f85.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?