完整的导航解析流程

index.js

import vuerouter from "vue-router";
import usersettings from "./usersettings";
import useremailssubscriptions from "./useremailssubscriptions";
import userprofile from "./userprofile";
import userprofilepreview from "./userprofilepreview";

function dynamicpropsfn(route) {
    const now = new date()
    return {
        name: (now.getfullyear() + parseint(route.params.years)) + '!'
    }
}

const routes = [
    {
        path: '/user/settings/:years',
        props: dynamicpropsfn,
        // you could also have named views at tho top
        component: usersettings,
        beforeenter: (to, from, next) => {
            console.log('beforeenter');
            next();
        },
        children: [
            {
                path: 'emails',
                name: 'emails',
                //redirect: {name: 'profile'},
                // redirect: function (to) {
                //     console.log(to);
                //     return {name: 'profile'};
                // },
                component: useremailssubscriptions,
            },
            {
                path: 'profile',
                name: 'profile',
                //此路由對應包含了兩個vue視圖組件
                components: {
                    default: userprofile,
                    helper: userprofilepreview
                },
            }]
    }
];

const router = new vuerouter({
    mode: 'history',
    routes,
});

let isauthenticated = false;
let csrf_token = document.getelementsbyname('csrf-token')[0].content;
if (csrf_token) {
    isauthenticated = true;
} else {
    isauthenticated = false;
}
router.beforeeach((to, from, next) => {
    console.log(csrf_token);
    console.log('beforeeach');
    // console.log(to.name);
    // console.log(from.name);

    if (to.name !== 'login' && !isauthenticated) {
        next({name: 'login'});
    } else {
        next();
    }
});

router.beforeresolve((to, from) => {
    console.log('beforeresolve');
    // console.log(to.name);
    // console.log(from.name);
});

router.aftereach((to, from) => {
    console.log('aftereach');
    // console.log(to.name);
    // console.log(from.name);
})


export default router;

usersettings.vue:

<template>
    <div class="us">
        <h2>user settings {{this.name}}</h2>
        <usersettingsnav/>
        <router-view class="us__content"/>
        <router-view name="helper" class="us__content us__content--helper"/>
    </div>
</template>

<script>
    import usersettingsnav from "./usersettingsnav";

    export default {
        name: "usersettings",
        props: ['name'],
        components: {
            usersettingsnav,
        },
        beforerouteenter(to, from, next) {
            console.log('beforerouteenter');
            // console.log(to.name);
            // console.log(from.name);
            next(vm => {

            });
        },
        beforerouteupdate(to, from, next) {
            console.log('beforerouteupdate');
            // console.log(to.name);
            // console.log(from.name);
            next();
        },
        beforerouteleave(to, from, next) {
            console.log('beforerouteleave');
            // console.log(to.name);
            // console.log(from.name);
            next();
        },

    }
</script>

<style scoped>

</style>

1. 导航被触发。
2. 在失活的组件里调用离开守卫。
3. 调用全局的 beforeeach 守卫。
4. 在重用的组件里调用 beforerouteupdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeenter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforerouteenter。
8. 调用全局的 beforeresolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 aftereach 钩子。
11. 触发 dom 更新。
12. 用创建好的实例调用 beforerouteenter 守卫中传给 next 的回调函数。