Question

在加载路线之前，我需要检查vue组件是否已经加载。在哪里可以找到有关vue / vue-router中已加载组件的信息？

Answer 1

更新：
$ router.options.routes数组不包含已加载的组件，它仅包含已注册的路由。没有提供有关是否分配了分配给已注册路由的组件的信息... :(看来我必须在vuex存储中编写自己的逻辑。

原始答案：
Vue路由器的路由存储在yourApp。$ router.options.routes中。它们包含所有已加载的组件，但是嵌套结构非常不方便。您需要遍历routes数组和所有树的分支。因此，我编写了一个简单的函数来获取所有已加载组件的列表：

let routerComponentNames =[];
function getRouterComponentNames(components){
    components.forEach(component => {
        if(component.name){
            routerComponentNames.push(component.name);
        }
        if(component.children){
            getRouterComponentNames(component.children);
        }
    });
}
getRouterComponentNames(yourApp.$router.options.routes);
console.log( "routerComponentNames", routerComponentNames );

如果只需要是非题，则可以使用以下功能：


function findComponentInRoutes(components, componentName) {
    let result = false;
    for (let component of components) {
        if (component.name && component.name === componentName) {
            result = true;
            break;
        } else if (component.children) {
            result = findComponentInRoutes(component.children, componentName);
            if(result){
                break;
            }
        } else {
            result = false;
        }
    }
    return result;
}

let isLoaded = findComponentInRoutes(yourApp.$router.options.routes, "Posts");
console.log(`isLoaded: ${isLoaded}`);

检查vue组件是否已加载

1 个答案: