TypeError：无法读取未定义(读取&#39；$ROUTER&#39；)vuejs的属性

因此，如果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"});

它不会出现任何错误地重定向用户。问题是我在仪表板组件的子组件中。

在DocentColltions组件中，我有一个方法：

    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"});
                }
            });
    },

其加载集合，但是如果用户具有某些数据集，则返回状态422为空API。我想让他重定向到设置组件。 (document Collection和Settings都是Dashboard的子组件)

为什么.$router.ush在这里不工作，但在登录/注册组件中工作？

---

解决方案

在回调函数内调用this会创建到this对象的新绑定，而不是正则函数表达式中的vue对象。

您可以使用箭头语法定义函数，因此this不会被覆盖。

.catch((error) => {
    if(error.response.status === 422){
        this.$router.push({name: "Settings"});
    }
})

More information

另一个选项

在axios调用之前定义this的另一个实例，并在收到响应后使用它。

let self = this
...
self.$router.push({name: "Settings"})

使用您的代码

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