Javascript 在Vue中更改视图

我的主vue应用程序中有两个视图（新用户视图和下一个视图）。默认值是newuser视图，由在我的html主页中实例化

当用户在newuser视图中点击submit按钮时，我想将currentView更改为next view

vue的主要应用程序是：

var Vue = require('vue');
Vue.use(require('vue-resource'));
Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');

new Vue({

    el: '#seoinput',

    data: {
        currentView: 'newuser-view',
        zipData2: {},
        newUser: {},
    },

    components: {
        'newuser-view': require('./views/inputdata'),
        'next-view': require('./views/displaydata')
    },

    methods: {
        refreshPage: function(zipData1) {
            this.zipData2 = zipData1;

            if (zipData1) {
                this.currentView = 'next-view';
            }

            // will change currentView value to next-view
            // will hit routes and refresh page
        }
    }
});

组件newuser视图代码为：

module.exports = {
    template: require('./inputdata.template.html'),
    props: ['app' ],
    data: function() {
        return {
            newUser: {
                biz_name: '',
                url: '',
                biz_age: '',
                country: '',
                pcode: ''
            },
            submitted: false,
            zipData1: {},
        };
    },
    computed: {
        errors: function () {
            for (var key in this.newUser) {
                if (!this.newUser[key]) {return true};
            }

            if (!this.zipData.City) {return true};

            return false;
        }
    },
    components: {
        codecheck: require('../components/codecheck')
    },
    methods: {
        populateZip: function(zipData) {
        this.zipData1 = zipData;
        this.newUser.pcode = this.zipData1.Zipcode;
        },
        onSubmitData: function(e) {
            // prevent the default action
            e.preventDefault();
            var zipinfo = this.zipData1;
            var newuser = this.newUser;
            this.$http.post('/api/seoData', newuser);
            this.app(zipData1);
            this.submitted = true;
        }
    }
};

新用户视图模板：

请输入所需信息：
企业名称：
*  
网站网址：
*
这家公司有多久了？
*
邮政编码：
*
国家：
*
完成！


正在验证您的邮政编码

只需使用组件语法即可

<component is="{{currentView}}"></component>

例如：

---

您可以使用特殊的动态组件在视图之间轻松切换

<component v-bind:is="currentView">
  <!-- component changes when vm.currentView changes! -->
</component>

---

有关

bus

和非父子事件的更多文档：

能否添加

inputdata.template.html

文件的内容？新用户视图的模板是inputdata.template.html您熟悉动态组件吗？您所要做的就是在视图模型中有一个属性，该属性指示您希望加载哪个视图并对其进行适当的设置。如果您将其放在JSFIDLE上，则更容易帮助您。

<component v-bind:is="currentView">
  <!-- component changes when vm.currentView changes! -->
</component>

var bus = new Vue();

new Vue({
  template: '#app',
  data: {
    currentView: 'home'
  },
  created: {
     var self = this;
     bus.$on('view',function(page) {
       self.currentView = page;
     });
  },
  methods: {
     changeView: function(page) {
        bus.$emit('view', page);
     }
  }
})