Question

我有；

从express运行在端口2012上构建的API
在端口8080上运行的Vue应用

Vue应用程序使用Axios与API通信。

我已经能够注册用户并在用户单击“注册”或“登录”时登录他们，它将把他们的数据提交给API，如果API响应并带有OK消息，则使用this。$ router。如果用户成功注册，则为push（'/ login'）；如果用户从登录页面成功登录，则为$ .router.push（'/ dashboard'）。但是，当我尝试在仪表板Vue上调用this。$ router.push时，仍然收到“无法读取未定义的属性'push'”。

login.vue（this。$ router.push有效）

<template>
    <form id="login_form" method="post" v-on:submit.prevent="onSubmit">
        <input type="text" name="username" class="form-control" v-model="auth.username" placeholder="username" />
        <input type="password" name="password" class="form-control" v-model="auth.password" placeholder="password" />
        <input type="submit" value="Submit" />
    </form>
</template>
<script>
import Vue from 'vue'
import login_axios from '../axios/login_axios.js'

export default{
    name: 'login_form',
    data:function(){
        return{
            auth:{
                username:'',
                password:''
            }   
        }
    },
    methods:{
        onSubmit: login_axios.methods.onSubmit 
    },
    components:{
        login_axios  
    }

}
</script>

此login_vue组件导入了一个名为login_axios.js的javascript文件 login_axios包含一个名为onSubmit的方法，该方法在用户单击登录/提交时被调用。 onSubmit检查res.data.auth.authenticated是true还是false，如果是true，则执行this。$ router.push到/ dashboard，可以正常工作。但是，从仪表盘上它不起作用。

login_axios.js（this。$ router.push有效）

import Vue from 'vue'
import axios from 'axios'
import AxiosStorage from 'axios-storage'

let sessionCache = AxiosStorage.getCache('localStorage');

export default {
    methods:{
        async onSubmit(e){
            e.preventDefault();
            const res = await axios.post('http://myapi/login', this.auth);

            try{



                if(res.data.auth.authenticated){
                    sessionCache.put('authenticated', true);
                    this.$router.push('/dashboard');
                }

            } catch (error){

                console.log(error);
            }

        }
    }
}

下面是dashboard.vue，它导入了dashboard_axios.js

dashboard.vue（无法读取未定义的属性“ push”）

<template>
<div>
    <h1>Dashboard</h1>
    <a href="/login">Login</a>
    <a href="/register">Register</a>
    <a href="/posts">Posts</a>
    <a href="/about">About</a>
</div>
</template>
<script>
import Vue from 'vue'
import dashboard_axios from '../axios/dashboard_axios.js'


export default {
    name: 'dashboard',
    methods:{


    },
    components:{
        dashboard_axios
    }

}

</script>

我尝试了几种不同的方法，但是最终我将self设置为const。我在dashboard_axios.js中定义了函数verify_auth，然后直接调用了它。我希望它能正常工作，因为它只是一个需要调用的函数。我可能不是专家，但我可能完全不了解，但我一直在努力研究。

dashboard_axios.js（无法读取未定义的属性“ push”）

import Vue from 'vue'
import router from 'vue-router'
import axios from 'axios'
import AxiosStorage from 'axios-storage'

const self = this;

let sessionCache = AxiosStorage.getCache('localStorage');

sessionCache.put('authenticated', false);

console.log(sessionCache.get('authenticated'));


function verify_auth(){
    if(sessionCache.get('authenticated')){
        console.log('successfully verified authentication')
        self.$router.push('/')
    }else{
        console.log('issue verifying authentication')
        self.$router.push('/login')
    }
}


verify_auth();

export default {
    name: 'dashboard_axios',
    methods:{


    },
    data: function() {

    },
    created: function(){

    }
}

Answer 1

我不确定100％是否是答案，但是我找到了解决方法。

我正在导入javascript文件，例如“ dashboard_axios.js”，但没有按我希望的那样加载。因此，我改为将文件重命名为'dashboard_axios.vue'并添加<template></template>，然后将其保留为空，然后将js代码包装在<script></script>中，然后将其包装在仪表板上。vue我称为{{1 }}标签，它按预期运行。

无法读取未定义的属性“ push”-vue和axios

1 个答案: