[Vuejs]-Check if vue component is loaded

3👍

Update:
The $router.options.routes array does not contain loaded components it just contains registered routes. The information about whether the components assigned to the registered routes are loaded or not, isn’t provided… 🙁 It seems I have to write my own logic in the vuex store.

Original Answer:
The vue-router’s routes are stored in yourApp.$router.options.routes. Those contain all loaded components, but in a very unhandy nested structure. You need to traverse the routes array and all the tree’s branches. So I’ve wrote a simple function to get a list of all the loaded components:

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 );

If one just need a true/false answer, then one could use the following function:


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}`);


Leave a comment