因此，如果 api 调用返回状态 422，我会尝试将用户重定向到不同的路由。但是我收到错误

TypeError: Cannot read properties of undefined (reading '$router')

我的 routes.js：

{
        path: '/dashboard',
        component: Dashboard,
        name: 'Dashboard',
        beforeEnter: (to, form, next) =>{
            axios.get('/api/authenticated')
                .then(()=>{
                    next();
                }).catch(()=>{
                    return next({ name: 'Login'})
            })
        },
        children: [
            {
                path: 'documentCollections',
                component: DocumentCollection,
                name: 'DocumentCollections'
            },
            {
                path: 'document',
                component: Document,
                name: 'Document'
            },
            {
                path: 'createDocument',
                component: CreateDocument,
                name: 'CreateDocument'
            },
            {
                path: 'suppliers',
                component: Suppliers,
                name: 'Suppliers'
            },
            {
                path: 'settings',
                component: Settings,
                name: 'Settings'
            },
        ]
}

我也有登录/注册组件，当我使用

this.$router.push({ name: "DocumentCollections"});

它会重定向用户而没有任何错误。问题是当我在仪表板组件的子组件中时。

在 documentCollections 组件中我有一个方法：

    loadCollections(){
        axios.get('/api/documentCollections')
            .then((response) => {
                this.Collections = response.data.data
                this.disableButtons(response.data.data);
            })
            .catch(function (error){
                if(error.response.status === 422){
                    //here is where the error happens
                    this.$router.push({ name: "Settings"});
                }
            });
    },

这会加载集合，但如果用户有一些数据集为空，api 返回状态 422。我希望他被重定向到设置组件。 （documentCollection 和 Settings 都是 Dashboard 的子组件）

为什么 this.$router.push 在这里不起作用，但在登录/注册组件中却起作用？