[Vue][router] afterEach

afterEach는 A컴포넌트에서 B컴포넌트로 넘어간 후 실행할 코드를 적는다.

넘어간 후이기 때문에 파라미터로 next가 필요없다.

요컨대 이동 액션(action)이나 사용자의 페이지 변경을 로그로 남기는 등

afterEach로 수행할 수 있다.

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';

import App from './App.vue';
import TeamsList from './components/teams/TeamsList.vue';
import UsersList from './components/users/UsersList.vue';
import TeamMembers from "./components/teams/TeamMembers.vue";
import NotFound from "./components/nav/NotFound.vue";
import TeamsFooter from "./components/teams/TeamsFooter.vue";
import UserFooter from "./components/users/UserFooter.vue";
const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/', redirect:'/teams'},
        {
            name:'teams',
            path: '/teams',
            components: {default: TeamsList, footer: TeamsFooter},
            children:[
                { name:'team-members', path: ':teamId', component: TeamMembers, props: true}
            ]
        }, // our-domain.com/teams => TeamsList
        {
            path: '/users',
            components: {
                default: UsersList,
                footer: UserFooter
            },
            beforeEnter(to,from,next){
                console.log('users beforeEnter');
                console.log(to,from);
                next();
            }
        },
        { path: '/:notFound(.*)', component: NotFound}
    ],
    linkActiveClass:'active',
    scrollBehavior(_,_2,savedPosition){
        // console.log("to : ");
        // console.log(to);
        // console.log("from : ");
        // console.log(from);
        // console.log("savedPosition : ");
        // console.log(savedPosition);
        if(savedPosition){
            return savedPosition;
        }
        return{left:0,top:0};
    }
});

router.beforeEach(function (to, from,next){
    console.log('Gloabl beforeEach')
    console.log(to,from);
    // if(to.name ==='team-members'){
    //     next();
    // }else{
    // next({name: 'team-members',params: {teamId:'t2'}});}
    next();
});
router.afterEach(function (to,from){
    console.log('Global afterEach');
    console.log(to,from);
});
const app = createApp(App);

app.use(router);

app.mount('#app');