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?