Vue routing page does not jump problem - Codes Helper

use this.$router.push ({path:"/ profile/recharge"}); jump to
/ profile/recharge to find that the browser address has changed, but the page is still the original page.

There is no problem with the path to the

file, and when the click event is triggered on profile.vue , the custom click method is executed. But the page didn"t jump. Can the page jump back and forth? But the initialization method in recharge.vue is not executed. I don"t know if what I understand is correct. Also ask veteran driver to take a look at it. Thank you very much.

< H1 > router.js < / H1 >


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

< H1 > App.vue < / H1 >

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

< H1 > profile.vue < / H1 >

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

< H1 > recharge.vue < / H1 >

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