Question

我是JS的新手，请原谅我的代码看起来不是最好的。无论如何，我有一个使用AWS SNS的表单，其中包含表单中提供的信息，向我的公司发送电子邮件。但是，我没有任何反馈可让用户知道该表单已提交。

我一直在尝试使用VueJS导航到另一个页面或URL，该页面或页面上面写着“谢谢。您的表单已提交”，但我收到一条消息，提示“无法读取属性'push'的。”

理想情况下，我希望只使用“ this.router.push（'abc123.com'）;”这样，在表单提交后，它就转到了abc123.com。

感谢大家提供的任何帮助！

const routes = [
    { path: 'abc123.com'}
]

const router = new VueRouter({
    routes
})
var app = new Vue({
    el: '#app',
    router,
    data(){
        return{
            yourName: null,
            from: null,
            phone: null,
            company: null,
            msg: null,
            timeframe: '',
            picked: '',
            proType: ''
        }
    },
    methods: {
        checkForm: function (){
            console.log(this.fullName);
            let result = null;
            let that = this;
            if ( this.from === null || this.from === '' ){
                alert( "Please enter a valid email address." )
                return false;
            } 
            if ( this.yourName === null || this.yourName === '' ){
                alert( "Please enter your full name." )
                return false;
            } 
            if ( this.msg === null || this.msg === '' ){
                alert( "Please enter a message." )
                return false;
            } 
            if ( this.picked === null || this.picked === '' ){
                alert( "Please choose a contact option." )
                return false;
            }
            if ( this.timeframe === null || this.timeframe === '' ){
                alert( "Please choose a time frame for the project." )
                return false;
            }
            if ( this.proType === null || this.proType === '' ){
                alert( "Please choose whether this is a new project or if it will be a modified application." )
                return false;
            } 
            that.publishSNS();
            that.redirect();                
        },

        publishSNS: function(){
                    //Removed confidential information for post
                });

                var sns = new AWS.SNS();

                var d = new Date();

                var params = {
                    Message: "Name: " + this.yourName + "\n" + "Company: " + this.company + "\n" + "Email: " + this.from + "\n" + "Phone Number: " + this.phone + "\n" + "Project Type: " + this.proType + "\n" + "Contact by: " + this.picked + "\n" + "Time Frame: " + this.timeframe + "\n" + "Message: " + this.msg,/* required */
                    Subject: 'Proposal Request' + ' (sent ' + d + ')',
                };
                sns.publish(params, function(err, data) {
                    if (err) console.log(err, err.stack); // an error occurred
                    else     console.log(data);           // successful response
                });
        },

        redirect: function(){
                this.router.push('https://360works.com/action/email');
        }

    }

}).$mount('#app')

我希望用户提交表单后浏览器能够导航到abc123.com。

Answer 1

使用router.push('url')（删除this.）。您尚未在router中声明data()，因此不会在this上进行设置。这只是一个局部变量。

Answer 2

在您的代码中： this.router 应该 this.$router

您需要使用path =>组件定义路由器

const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
]

如果您想将用户重定向到另一个站点，则可以直接使用位置对象而无需路由器

// Sets the new location of the current window.
window.location = "https://www.example.com";

如何使用VueJS导航到另一个页面/ URL？

2 个答案: