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.js
https://cdn.jsdelivr.net/npm/vue

嘗試 Vue.js 的工具：https://jsfiddle.net/chrisvfritz/50wL7mdz/

示例

簡單的演示vue和vue-router在項目中的使用，關鍵操作在代碼中會有相應註釋說明

實現列表頁和詳情頁的關鍵代碼

vm頁面

first_demo.vm 這裏用velocity模板引擎

<template id="list" style="display: none;">#*列表模板*#
    <div id="allQuery">#*引入查詢條件*#
        <form>
            <row>
                <pinput type="text" :value.sync="query.id" placeholder="請輸入編號"></pinput>
                <pinput type="text" :value.sync="query.name" placeholder="請輸入姓名"></pinput>
                <pinput type="text" :value.sync="query.age" placeholder="請輸入年齡"></pinput>
            </row>
        </form>
    </div>
    <table border="1">#*列表內容*#
        <tr>
            <th>編號</th>
            <th>姓名</th>
            <th>年齡</th>
            <th>操作</th>
        </tr>
        <div v-for="firstDemoVo in firstDemoVoList">
            <tr>
                <td>{{firstDemoVo.id}}</td>
                <td>{{firstDemoVo.name}}</td>
                <td>{{firstDemoVo.age}}</td>
                <td>{{firstDemoVo.do}}</td>
            </tr>
        </div>
    </table>
</template>

<template id="detail" style="display: none;">
    <div v-if="detailShow && detailData">#*詳情頁內容*#
        <div>
            <span>姓名：</span>
            <span>{{detailData.name}}</span>
        </div>
        <div>
            <span>年齡：</span>
            <span>{{detailData.name}}</span>
        </div>
    </div>
    <button v-link="'/list">關閉</button> #*路由跳轉至列表頁*#
    <button @click="checkReject" >駁回</button>
</template>

<div id="firstDemoApp">
    <router-view keep-alive></router-view>  #*keep-alive作用：保留列表頁的查詢條件*#
</div>

#*引入vue庫*#
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
#*業務組件*#
<script src="/js/common/common.js" type="text/javascript"></script>
<script src="/js/first_vue_demo/first_demo_api.js" type="text/javascript"></script>
<script src="/js/first_vue_demo/first_demo_components.js" type="text/javascript"></script>
<script src="/js/first_vue_demo/first_demo_router.js" type="text/javascript"></script>

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 = '<a v-link="'+link+'">查看</a>';
                        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("審覈通過失敗");
                }
            });
        }
    }
}