vue 实现自动根据路由表的路由name同步定义引入的页面组件的name实现

• autoNamePlugin.js

export default {
    install: (app) => {
        const router = app.config.globalProperties.$router;

        if (router) {
            router.beforeEach(async (to, from, next) => {
                try {
                    // 获取匹配到的路由组件
                    const matchedComponents = to.matched;

                    for (const record of matchedComponents) {
                        if (record.components?.default) {
                            // 如果是异步组件，需要等待它加载完成
                            if (typeof record.components.default === 'function') {
                                const Component = await record.components.default();
                                // 为实际的组件设置名称
                                if (Component?.default) {
                                    Component.default.name = record.name;
                                }
                            } else {
                                // 同步组件直接设置
                                record.components.default.name = record.name;
                            }
                        }
                    }
                    next();
                } catch (error) {
                    console.error('Error in autoNamePlugin:', error);
                    next();
                }
            });
        }
    }
};

• main.js

import autoNamePlugin from './plugins/autoNamePlugin';

...
app.use(autoNamePlugin);
...

目的是为了路由表的name自动给引入的页面组件同步命名同样的命名。