vue路由页面不跳转问题

Question

利用 this.$router.push({path: '/profile/recharge'}); 跳转到
/profile/recharge 发现浏览器地址变了，但页面还是原来的页面。

文件的路径都没有问题，在 profile.vue 上触发点击事件时，自定义的 click 方法执行了。但页面没跳转。能不能是页面跳转过去又跳转回来了？ 但 recharge.vue 里的初始化方法没执行。不知道我理解的是否正确。 还请 老司机 帮忙看看，非常感谢。

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>

Answer 1

应该是profile.vue中缺少了<router-view></router-view>吧，导致子路由没法渲染，你加上试下呢

Answer 2

recharge.vue作为子组件应该是添加到profile.vue父组件中的，不应包含header和footer，只需维护recharge特有的内容即可；如楼上所说在父组件需要渲染recharge的地方加上router-view即可，或者调整recharge和profile同级；