vueとvue-routerを組み合わせてwebページを構築

概要
コア:テンプレート構文を使用してDOMのシステムにデータを宣言的にレンダリングします.特色:データの双方向バインドを実現-->データとDOMはすでに関連付けられており、すべてのものは応答式であり、伝統的なJavaScriptのdomへの遍歴、イベントバインドなどの過程を省いている.vueドキュメント:https://cn.vuejs.org/v2/guide/vue-routerドキュメント:https://cn.vuejs.org/v2/guide/migration-vue-router.htmlライブラリ:https://unpkg.com/vue-router/dist/vue-router.jshttps://cdn.jsdelivr.net/npm/vue
試してみるjsのツール:https://jsfiddle.net/chrisvfritz/50wL7mdz/
例
プロジェクトでのvueとvue-routerの使用を簡単に説明します.キー操作にはコードにコメントがあります.
リスト・ページと詳細ページのキー・コードの実装
vmページ
first_demo.vmここではvelocityテンプレートエンジンを使用します

      #*keep-alive  ：          *#


#*  vue *#


#*    *#

jsファイル
first_demo_api.js

//   API
list : (function(root, $http) {
        var api = {};
        api.getDemoDetailByIdUri = "/api/demo/getDemoDetailById";//      url
        api.getDemoListByConditionUri = "/api/demo/getDemoListByCondition";

        /**
         *     
         * @param id
         * @param func1
         * @param func2
         */
        api.getDemoDetailById = function (id, func1, func2) {
            $http.get(api.getDemoDetailByIdUri+'?id='+id).then(function (response) {
                func1(response.data);
            }.bind(this), function(response) {
                if(func2) func2(response);
            }.bind(this));
        };

        /**
         *     
         * @param query
         * @param func1
         * @param func2
         */
        api.getDemoListByCondition = function(query, func1, func2) {
            $http.post(api.getDemoListByConditionUri , query).then(function(response) {
                func1(response.data);
            }.bind(this), function(response) {
                if(func2) func2(response);
            }.bind(this));
        };

        ////        。。。。。。。
        
        root.firstDemoApi = api;
    }
    
)(window, Vue.http);

first_demo_router.js

/**
 *   
 * Created by xianjuanjuan on 2017/12/10.
 */
Vue.config.devtools = true;

var router = new VueRouter({});
router.map({
    '/list': { 
        component: firstDemoApp.list 
    },
    '/detail/:id': { //        
        name: 'detail', 
        component: firstDemoApp.detail 
    }
});
router.redirect({//       
    '/': '/list'
});
var App = Vue.extend({});
router.start(App, '#firstDemoApp');

first_demo_components.js

var firstDemoApp = {};

/**
 *   ：list detail        ，    firstDemoApp.list.xx = firstDemoApp.detail.xx ..
 * @type {{template: string, route: {data: firstDemoApp.list.route.data}, data: firstDemoApp.list.data, methods: {loadData: firstDemoApp.list.methods.loadData}}}
 */

firstDemoApp.list = {//        
    template: '#list',
    route: {
        data: function (transition) {//   jquery ready
            var query = this.$route.query;//  url         ",    query，    url ?    
            if (query && query.status) {
                Vue.set(this.query, 'status', query.status);//      query     status     
            }
            this.loadData();//      
        }
    },
    data: function () {//         
        return {
            query: {
                pageSize: 10,//       
                page: 1
            },
            firstDemoVoList: []//         ，      
        }
    },
    methods: {//        
        loadData: function () {
            firstDemoApi.getDemoListByCondition(this.query, function (data) {//  version-api.js
                if (data) {
                    this.firstDemoVoList = data;//  vue      ，          
                    this.firstDemoVoList.map(function (firstDemoVo) {//      
                        var link ="{ name: 'detail', params: { id: "+firstDemoVo.id+"}}";//             
                        var temp = '  ';
                        firstDemoVo.do = temp;
                    });
                }
            }.bind(this));
        },
    }
}

firstDemoApp.detail = {
    template: '#detail',
    route: {
        data: function (transition) {
            var params = this.$route.params;//  url         ，     params ，      /detail/:id  id
            this.loadDetail(params.id);
        }
    },
    data: function () {
        return {
            detailShow: false,/**      **/
            detailData:{}/**         **/
        }
    },
    methods:{
        /**
         *     
         * @param id
         */
        loadDetail:function (id) {
            var _this = this;
            firstDemoApi.getDemoDetailById(id, function (data) {
                if (data) {
                    _this.detailData = data;//      
                    _this.detailShow = true;
                }
            }.bind(_this));
        },
        checkReject:function () {
            firstDemoApi.checkReject({"id":this.detailData.id},function (data) {
                if(data.success == true){
                    alert("    ");
                    router.go({name: 'list', params: firstDemoApp.list.query});//         
                }else {
                    alert("      ");
                }
            });
        }
    }
}