const home = { template: '<div>\ <div>[HOME]</div>\ <h2>ex.1 useage of v-model-link</h2>\ <div>chose: <input v-model="choseValue" v-model-link="\'/chose\'" @input="modelLinkCallback" /></div>\ <h2>ex.2 useage of $routerThen.push</h2>\ <div><input type="text" v-model="message"/>\ <button @click="routerThenClick">GO</button>\ <h2>ex.3 useage of $routerThen.modelLink</h2>\ chose: <input v-model="choseValue"/>\ <button @click="routerThenModelLink">GO</button>\ </div>\ </div>\ ', data() { return { message: 'hello, world.', choseValue: '?', } }, methods: { routerThenClick: function() { this.$routerThen.push('/chose').then(vm => { vm.msg = this.message; vm.$once('input', value => { this.choseValue = value; }); }); }, modelLinkCallback: function(value) { console.log(value); }, routerThenModelLink:function(){ this.$routerThen.modelLink('/chose',value=>{ this.choseValue = value; }); } } } const chose = { template: '<div>\ <div @click="goBack">< back</div>\ <button @click="chose(\'A\')">A</button>\ <button @click="chose(\'B\')">B</button>\ <button @click="chose(\'C\')">C</button>\ <button @click="chose(\'D\')">D</button>\ <div> {{msg}} </div>\ </div>', data() { return { msg: '????, ?????.', } }, mounted: function() { this.time = new Date().getTime() }, methods: { goBack: function() { this.$router.go(-1); }, chose: function(r) { this.$emit('input', r); this.$router.go(-1); }, } } const router = new VueRouter({ routes: [ {path: '/',component: home}, {path: '/chose',component: chose}, {path: '*',component: home}, ] }) new Vue({ router, el: '#app', }) $routerThen.initRouter(router);
<script src="https://npmcdn.com/vue/dist/vue.js"></script> <script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script> <script src="https://unpkg.com/vue-router-then/dist/index.min.js"></script> <div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div>