为什么computed会在我另一个方法走到一半的时候就执行了

问题描述

最近在学习vue，今天跟着视频写了一个路由守卫，是除非去登录页面，否则就得执行initMenu方法来加载一遍菜单栏。当我输入/home请求时，我的initMenu方法还没执行到底，结果Home.vue页面的computed居然先插一脚把自己给执行了，然后再执行剩下的initMenu方法里的内容，这是为什么？

代码

路由守卫代码如下

router.beforeEach((to, from, next) => {
  
  if(to.path == '/') {
      next();
  } else {
      
      initMenu(router, store);
      next();
  }
})

这是我的initMenu方法代码

export const initMenu = (router, store) => {
    if(store.state.routes.length > 0) {
        console.log("有数据");
        // 有菜单数据
        return;
    }
    console.log("1.没有数据");
    getRequest("/system/config/menu").then(data=>{
        if(data){
            let fmtRoutes = formatRoutes(data);
            router.addRoutes(fmtRoutes);
            console.log("2.已有路由");
            console.log(router.options.routes);
            console.log("===================");
            console.log("3.待添加的路由");
            console.log(fmtRoutes);
            store.commit('initRoutes', fmtRoutes);
            console.log("4.添加后");
            console.log(store.state.routes);
        }
    })
}

这是getRequest方法的代码

export const getRequest = (url, params) => {
    return axios({
        method: 'get',
        url: `${base}${url}`,
        data: params
    })
};

这是我的Home.vue页面里的computed代码

computed: {
        routes() {
            console.log("5.来自Home页面 - 用于遍历的routes:");
            console.log(this.$store.state.routes);
            return this.$store.state.routes;
        }
  }

输入/home后控制台信息如下