SOURCE

var ParentComponent = {
    template: `<div> 
        parent component
        <router-view></router-view>
        </div>`,
    data: function () {
        return {

        };
    },
    methods: {},
    beforeCreate: function () {
        console.log('parent component beforeCreate');
    },
    created: function () {
        console.log('parent component created');
    },
    beforeMount: function () {
        console.log('parent component before Mount');
    },
    mounted: function () {
        console.log('parent component mounted!');
    },
    beforeRouteEnter: function (to, from, next) {
        console.log(' parent component  component BeforeRouteEnter');
        next();
    },
    beforeRouteUpdate: function(to, from, next){
        // 复用组件时进行更新之前，beforeRouteUpdate不会触发任何进入和离开的导航守卫
        console.log('parent component beforeRouteUpdate守卫');
        next();
    },
    beforeRouteLeave: function(to, from, next){
        console.log('parent component beforeRouteLeave守卫，在导航发生变化，该组件失活时调用');
        next();
    }

};

var ChildComponentA = {
    template: `<div> child component A</div>`,
    beforeCreate: function () {
        console.log('child component A beforeCreate');
    },
    created: function () {
        console.log('child component A created');
    },
    beforeMount: function () {
        console.log('child component A before Mount');
    },
    mounted: function () {
        console.log('child component A mounted!');
    },
    beforeRouteEnter: function (to, from, next) {
        console.log(' child component A component BeforeRouteEnter');
        next();
    },
    beforeRouteUpdate: function(to, from, next){
        // 复用组件时进行更新之前，beforeRouteUpdate不会触发任何进入和离开的导航守卫
        console.log('child component A  beforeRouteUpdate守卫');
        next();
    },
    beforeRouteLeave: function(to, from, next){
        console.log('child component A beforeRouteLeave守卫，在导航发生变化，该组件失活时调用');
        next();
    }
};

var ChildComponentB = {
    template: `<div> child component B</div>`,
    beforeCreate: function () {
        console.log('child component B beforeCreate');
    },
    created: function () {
        console.log('child component B created');
    },
    beforeMount: function () {
        console.log('child component B before Mount');
    },
    mounted: function () {
        console.log('child component B mounted!');
    },
    beforeRouteEnter: function (to, from, next) {
        console.log(' child component B component BeforeRouteEnter');
        next();
    },
    beforeRouteUpdate: function(to, from, next){
        // 复用组件时进行更新之前，beforeRouteUpdate不会触发任何进入和离开的导航守卫
        console.log('child component B  beforeRouteUpdate守卫');
        next();
    },
    beforeRouteLeave: function(to, from, next){
        console.log('child component B beforeRouteLeave守卫，在导航发生变化，该组件失活时调用');
        next();
    }
};

var RedirectComponent = {
    template: `<div> redirect component</div>`,
    beforeCreate: function () {
        console.log('redirect component  beforeCreate');
    },
    created: function () {
        console.log('redirect component created');
    },
    beforeMount: function () {
        console.log('redirect component before Mount');
    },
    mounted: function () {
        console.log('redirect component mounted!');
    },
    beforeRouteEnter: function (to, from, next) {
        console.log(' redirect component BeforeRouteEnter');
        next();
    },
    beforeRouteUpdate: function(to, from, next){
        // 复用组件时进行更新之前，beforeRouteUpdate不会触发任何进入和离开的导航守卫
        console.log('redirect component beforeRouteUpdate守卫');
        next();
    },
    beforeRouteLeave: function(to, from, next){
        console.log('redirect component beforeRouteLeave守卫，在导航发生变化，该组件失活时调用');
        next();
    }
};

const routes = [
    {
        path: '/',
        component: ParentComponent,
        children: [
            {
                path: '',
                // redirect: '/test',
                beforeEnter: function (to, from, next) {
                    console.log('redirect /test beforeEnter', to );
                    next();
                },
            },
            {
                path: 'childA',
                component: ChildComponentA,
                beforeEnter: function (to, from, next) {
                    console.log('childA beforeEnter', to );
                    next();
                },
            },
            {
                path: 'childB',
                redirect: '/testChildB',
                beforeEnter: function (to, from, next) {
                    console.log('childB beforeEnter', to );
                    next();
                },
            },
        ],
        beforeEnter: function (to, from, next) {
            console.log('/ beforeEnter', to );
            next();
        },
    },
    {
        path: '/test',
        component: RedirectComponent,
        beforeEnter: function (to, from, next) {
            console.log('test router beforeEnter', to , from);
            next();
        },
    },
    {
        path: '/testChildB',
        component: ChildComponentB,
        beforeEnter: function (to, from, next) {
            console.log('test childB  router beforeEnter', to , from);
            next();
        },
    },
];

const router = new VueRouter({
    routes: routes,
});

router.beforeEach(function(to, from, next){
    console.log('beforeEach守卫');
    next();
});

router.beforeResolve(function(to, from, next){
    console.log('beforeResolve守卫,导航被确认之前');
    next();
});

router.afterEach(function(to, from) {
    console.log('afterEach 导航被确认之后 导航不可被修改');
});

new Vue({
    el: '#app',
    router: router,
    beforeCreate: function () {
        console.log('根组件 beforeCreated');
    },
    created: function () {
        console.log('根组件 created');
    },
    beforeMount: function () {
        console.log('根组件 beforeMount');
    },
    mounted: function () {
        console.log('根组件 mounted');
    },
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
    测试vue router中的redirect和组件的生命周期的关系
    <router-view></router-view>

    <div>
        <router-link to="/childA">导航到子组建</router-link>
        <router-link to="/testChildB">导航到子组件B</router-link>
    </div>
    
</div>