vue和vue-router结合构建web页面_vue router构建web-CSDN博客

本文介绍如何结合Vue.js和Vue Router构建Web页面，重点在于数据双向绑定和DOM操作的简化。通过示例代码展示从列表页到详情页的跳转，涉及的关键文件包括first_demo.vm、first_demo_api.js、first_demo_router.js和first_demo_components.js。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

核心：采用模板语法来声明式地将数据渲染进 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("审核通过失败");
                }
            });
        }
    }
}