类型错误：无法读取未定义的属性（读取“$router”）vuejs

Question

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

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

我的路线.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"});
                }
            });
    },

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

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

Answer 1

在回调函数中调用this会创建一个到this对象的新绑定，而不是常规函数表达式中的 Vue 对象。

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

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

更多信息

另外一个选项

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

Answer 2

如果使用 Composition API：

// Import
import router from "@/router";

//and use
router.push({name: "Settings"});