鍍金池/ 問答/HTML/ vue-router 跳轉(zhuǎn)頁面問題,請看詳細(xì)描述

vue-router 跳轉(zhuǎn)頁面問題,請看詳細(xì)描述

vue-router,A頁面跳轉(zhuǎn)B頁面。沒有完全跳轉(zhuǎn),是把B頁面內(nèi)容追加到了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" >跳轉(zhuǎn)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>

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

回答
編輯回答
朕略傻

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

2018年3月20日 18:26
編輯回答
笨尐豬

原因可能是這個:

clipboard.png

你這樣寫,應(yīng)該是父子關(guān)系的路由才這么寫。

2017年10月28日 01:22
編輯回答
吢涼

因為你的router-view是在a頁面里面的唄,b頁面加載是占用的routerview在a頁面的那部分位置哦

2017年2月17日 08:57
編輯回答
熊出沒

因為你的router-view是在a頁面里面的,b頁面加載是占用的routerview在a頁面的位置,如果你要實現(xiàn)覆蓋a頁面的話,將b頁面的整個頁面設(shè)置css,因為看了人家的demo也是這樣的,css代碼:

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f2f2f2;
z-index: 202;
padding-top: 1.95rem;
2018年7月24日 09:33