SOURCE

var loadPage = (id) => {
    let page1 = document.getElementById(id || 'page1');
    return page1.innerHTML;
};

const router = new VueRouter({
    routes: [
        {
            path: '/'
            ,name: 'Home'
            ,redirect: '/page2'
        }
        ,{
            path: '/index/:data'
            ,params: {
                data: '12345'
            }
            ,component: {
                template: loadPage('index')
                ,data: () => {
                    return app._data;
                }
                ,methods: {
                    submit: (event) => {
                        let data = {};
                        if (!event) {
                            //方案一，推荐
                            data = app._data;
                        }else{
                            //方案二
                            let form = event.target;
                            for(let i=0; i<form.length; i++){
                                let node = form[i];
                                let value;
                                switch(node.nodeName){
                                    case 'INPUT':
                                        switch(node.type){
                                            case 'radio':
                                            case 'checkbox':
                                                if(node.checked) value = node.value;
                                                break;
                                            case 'number':
                                            case 'text':
                                            case 'tel':
                                            case 'password':
                                            case 'email':
                                                value = node.value;
                                                break;
                                        }
                                        break;
                                    case 'TEXTAREA':
                                        value = node.value;
                                        break;
                                    case 'SELECT':
                                        for(let o=0; o<node.length; o++){
                                            let opt = node[o];
                                            if(opt.selected) {
                                                if (opt.value) value = opt.value;
                                                else value = opt.innerText;
                                            }
                                        }
                                        break;
                                    default:
                                }
                                if(value!=undefined){
                                    //let attr = node.attributes;
                                    let name = node.name || (''+i);
                                    data[name] = value;
                                }
                            }
                        }
                        alert(JSON.stringify(data));
                        axios.post(window.location.origin+'/push_data', data)
                        .then(response => (this.res = response))
                        .catch((error) => {
                            console.log(error);
                        });
                        //return false;
                    }
                    ,click1: (event) => {
                        alert(event.target.nodeName);
                        top.ContextC = this.$route;//.params;
                        //app.submit();
                    }
                }
            }
        }
        ,{
            path: '/page1/:data1'
            ,component: {
                template: loadPage()
                ,props: ['data1']
            }
            ,props: true
        }
        ,{
            path: '/page2'
            ,component: {
                template: loadPage()
                ,props: ['data1']
            }
            ,props: {
                data1: 'data2'
            }
        }
        ,{
            path: '/page3'
            ,component: {
                template: '#page2'
                ,data: () => {
                    return {
                        data1: 'data333',
                        loading: true,
                        responseText: 'No Data'
                    };
                }
                ,created: () => {
                    console.log('created');
                    //this.loadData();
                }
                ,methods: {
                    loadData: () => {
                        console.log('load data');
                    },
                    test: () => {
                        console.log('children use parent method.');
                    }
                }
            }
            ,children: [
                {
                    path: '/page4'
                    ,template: '#page3'
                    ,methods: {
                        test: () => {
                            this.$parent.test();
                        }
                    }
                }
            ]
        }
        ,{
            path: '/page5'
            ,component: {
                template: '#page3'
            }
        }
    ]
});


const app = new Vue({
    el: '#app'
    ,router: router
    ,data: {
        data1: 'JsRun.net'
        ,data2: '小闪电'
        ,data3: true
        ,data4: ['A']
        ,data5: 'E'
        ,data6: ''
        ,data7: 0
    }
    ,mounted: () => {
        // axios.get(window.location.origin+'/test.json')
        // .then(response => (this.res = response))
        // .catch((error) => {
        //     //alert(error);
        //     console.log(error);
        // });
    }
});

<div id="app">
    <div class="tabHost">
        <router-link to="/index/123455" exact-active-class="_active">Index</router-link>
        <router-link to="/page1/data1" exact-active-class="_active">Page1</router-link>
        <router-link to="/page2" exact-active-class="_active">Page2</router-link>
        <router-link to="/page3" exact-active-class="_active">Page3</router-link>
        <router-link to="/page5" exact-active-class="_active">Page4</router-link>
    </div>
    <hr/>
    <div>
        <router-view></router-view>
    </div>
</div>
<script type="text/html" id="index">
<form v-on:submit.prevent="submit">
    <h3>Global: {{$route.params.data}}</h3>
    <p>Input msg is: {{data1}}</p>
    <input v-model.lazy.trim="data1" name="data1">
<hr/>
    <p>{{data2}}</p>
    <textarea v-modal.lazy="data2" name="data2">{{data2}}111</textarea>
<hr/>
    <p>Check:{{data3}}</p>
    <input type="checkbox" v-model="data3" name="data3">
<hr/>
    <p>CheckBox:{{data4}}</p>
    <input type="checkbox" value="A" v-model="data4" name="data4">
    <input type="checkbox" value="B" v-model="data4" name="data4">
    <input type="checkbox" value="C" v-model="data4" name="data4">
    <input type="checkbox" value="D" v-model="data4" name="data4">
<hr/>
    <p>Radio:{{data5}}</p>
    <input type="radio" value="E" v-model="data5" name="data5">
    <input type="radio" value="F" v-model="data5" name="data5">
    <input type="radio" value="G" v-model="data5" name="data5">
<hr/>
    <p>Select:{{data6}}</p>
    <select v-model="data6" name="data6">
        <option value="">UnSelect</option>
        <option value="1">Select1</option>
        <option value="2">Select2</option>
    </select>
<hr/>
    <p>Only input number:{{data7}}</p>
    <input type="number" v-model.number="data7" name="data7">
<hr/>
    <p>Submit Data</p>
    <button v-on:click.stop.prevent="click1">Click</button>
    <input type="submit" value="Submit">
    </form>
</script>
<script type="text/html" id="page1">
<div>page1 {{data1}}</div>
</script>
<template id="page2">
    <div>page2 : {{data1}}</div>
    <div>
        <router-link to="/page4">page3</router-link>
        <hr/>
        <router-view></router-view>
    </div>
    
    <div v-if="loading">Loading...</div>
    <div>{{responseText}}</div>
</template>
<template id="page3">
    <p>page3....</p>
    <button v-on:click="test">Test</button>
</template>

.tabHost>a{
    color: black;
    text-decoration: none;
    padding: 10px;
    line-height: 32px;
}
._active{
    color: orange;
    background-color: rgb(220, 220, 220);
}