利用 this.$router.push({path: '/profile/recharge'}); 跳轉(zhuǎn)到
/profile/recharge 發(fā)現(xiàn)瀏覽器地址變了，但頁面還是原來的頁面。

文件的路徑都沒有問題，在 profile.vue 上觸發(fā)點(diǎn)擊事件時，自定義的 click 方法執(zhí)行了。但頁面沒跳轉(zhuǎn)。能不能是頁面跳轉(zhuǎn)過去又跳轉(zhuǎn)回來了？ 但 recharge.vue 里的初始化方法沒執(zhí)行。不知道我理解的是否正確。 還請 老司機(jī) 幫忙看看，非常感謝。

router.js

import App from '../App.vue';

const home = () => import(/* webpackChunkName: "home" */'../page/home/home.vue');
const profile = () => import(/* webpackChunkName: "profile" */ '../page/profile/profile.vue');
const recharge = () => import(/* webpackChunkName: "recharge" */ '../page/profile/children/recharge.vue');

export default [{
    path: '/',
    component: App,
    children: [{
        path: '',
        redirect: '/home'
    },{
        path: '/home',
        component: home
    },{
        path: '/profile',
        component: profile,
        children: [{
            path: 'recharge',
            component: recharge
        }]
    }]
}]

App.vue

<template>
    <div>
        <transition name="router-fade" mode="out-in">
            <keep-alive>
                <router-view v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
        </transition>
        <transition name="router-fade" mode="out-in">
            <router-view v-if="!$route.meta.keepAlive"></router-view>
        </transition>
    </div>
</template>

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

            }
        }
    }
</script>

<style>
    .router-fade-enter-active, .router-fade-leave-active {
        transition: opacity .3s;
    }
    .router-fade-enter, .router-fade-leave-active {
        opacity: 0;
    }
</style>

profile.vue

<template>
    <div>
        <header-top />

        <section>

            <section class="profile-number">
                <van-button size="large" @click="rechargePage">RECHARGE</van-button>
            </section>


            <section class="profile-list-group">
                <van-cell-group>
                    <van-cell title="常見問題" icon="records" is-link />

                </van-cell-group>
            </section>
        </section>


        <footer-guide />

    </div>
</template>


<script type="text/babel">

    import HeaderTop from '../../components/header.vue';
    import FooterGuide from '../../components/footer.vue';

    export default {
        data(){
            return {

            }
        },
        components: {
            HeaderTop,
            FooterGuide
        },
        methods: {
            rechargePage(){
                console.log('click');
                console.log(this.$router);
                this.$router.push({path: '/profile/recharge'});
            }

        }
    }
</script>

recharge.vue

<template>
    <div>
        <header-top />

        <section>

            <section >
                lalala
            </section>


        </section>


        <footer-guide />

    </div>
</template>


<script type="text/babel">

    import HeaderTop from '../../../components/header.vue';
    import FooterGuide from '../../../components/footer.vue';

    export default {
        data(){
            return {

            }
        },
        created(){
            alert('ok');
        },
        components: {
            HeaderTop,
            FooterGuide
        }
    }
</script>