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

Question

因此，如果 api 调用 return 状态 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'
            },
        ]
}

我也有 login/register 个组件，当我使用

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 return 状态 422。我希望他被重定向到设置组件。（documentCollection 和 Settings 都是 Dashboard 的子组件）

为什么 this.$router.push 在这里不起作用，但在 login/register 组件中起作用？

Answer 1

在回调函数中调用 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"});
            }
        });
},

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

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

javascript

vue.js

vue-router

vuejs2

另一种选择