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模板引擎

      #*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("审核通过失败");
                }
            });
        }
    }
}