1.媒介

本日发完这一篇，就要这个系列告一段落了！今后假如有什么要补充的会继承补充！由于在背景治理项目上，搭建的话，重要就是如许了！另有的一些是细致到交互的处置惩罚，谁人是要依据后端的需求，来进来比较细化的事情，我在这里就不说了！说了意义也不大，人人的项目标项目不一样的，细化的事情一定是不一样的，然后开辟的人不一样，对接的事情一定也是不一样的！所以这个得靠小伙伴本身来处置惩罚和进修了！我写这文章的目标，愿望起到的作用是授人以渔，而不是授人以鱼。
好了，闲话不多说！本日要说的时应用监听路由的体式格局，完成同个页面差别状况的切换。细致如何呢，看下面。

2.应用路由

2-1应用场景

人人看侧边栏的时刻，有一个‘回款治理’和‘待确认回款’。人人都应该晓得。这两个页面只是挑选的前提有一个不一样，其他都是一样的。所以没必要弄两个基本如出一辙文件。所以照样公用一个文件比较好！然则假如是公用一个文件，那末在vue的生命周期那边，是不会从新衬着页面的。但依据项目标需求，在回款治理’和‘待确认回款’往返切换的时刻，有许多数据是要更新的。然则‘回款治理’和‘待确认回款’是同一个文件，在这里往返切换，许多数据没法更新。所以这个时刻，就要用到路由了！

2-2完成历程

2-2-1预备步骤

要完成‘待确认回款’回款也能和‘回款治理’那样切换，就必须要在router.js那边设置一下！

status是指一个参数，就是应用这个参数，让页面在‘回款治理’和‘待确认回款’这两个这里往返切换。
同时，在cashList.vue的data那边也要初始化一个变量(pageStatus)。用来纪录当前的时回款治理照样待确认回款！
router.js设置好了以后，然后去到snav-component.vue。然后在url‘待确认回款’那边，找到menus设置下url，设置一个将要传给status的参数。

这里传的时0，也就是代表着，假如路由的参数上，假如status是即是0的话，就是‘待确认回款’页面，不然就是‘回款治理’页面。
细致教程能够参考官网–vue-router

2-2-2监听路由

从这里最先，操纵的页面都是cashList.vue了，小伙伴要注意哦！
起首，应用路由，就要监听路由，我们应用watch监听。

watch: {
    //监听路由
    $route: {
        handler: function (val, oldVal) {
            //猎取路由参数
            let _urlParams = this.$route.params;
            //先清空搜刮字段（this.keyFrom）一切属性的值
            for (let key in this.keyFrom) {
                this.keyFrom[key] = null
            }
            //假如路由参数存在，而且参数含有status。
            if (_urlParams && _urlParams.status) {
                //就把回款状况keyFrom.cashStatus成‘待确认回款’状况！
                this.keyFrom.cashStatus = _urlParams.status;
                //pageStatus小伙伴本身在data定义哦，纪录当前状况！
                this.pageStatus = _urlParams.status;
            }
            //增加标签
            this.addTags();
            //更新数组cashList
            this.getList();
        },
        //深度视察监听
        deep: true
    }
}

$route.params就是路由的参数，人人要注意明白哦！

2-2-3页面处置惩罚

监听完路由
就处置惩罚一下，页面上了，有什么处置惩罚呢，人人剖析下。
1.‘待确认回款’页面中，回款状况这个下拉框，是牢固的，不定改的，在页面上，就要禁用

这个很简朴，只需绑定disabled属性就能够了，背面的推断就是，只需pageStatus即是0就绑定，路由的参数是字符串的’0′,人人也能够pageStatus==0。只需pageStatus即是0，那末页面就是‘待确认回款页面’

2.进入‘待确认回款’页面中，回款状况的挑选标签要加上。

这个就是在监听路由的时刻已做了，数组也更新了。

3.‘待确认回款’页面中，重置搜刮的时刻，别的前提消灭，回款状况依旧存在。
这个实在和监听路由一样的原理，也是一样的做法

resetSearch(){
    //先清空搜刮字段keyFrom
    for (let key in this.keyFrom) {
        this.keyFrom[key] = null
    }
    //假如是待确认回款页面，就设置回款状况keyFrom.cashStatus=0
    if (this.pageStatus === "0") {
        this.keyFrom.cashStatus = '0';
    }
    //增加标签和更新数组
    this.addTags();
    this.getList();
}

4.页面题目的转变！

这个就真的太简朴了。依据pageStatus推断就好。

3.总结

应用路由做的一些小操纵，本日就说到这里了！人人也能够想一下，假如不必路由，这个能够怎样完成。路由这里用的也是比较基本的用法。小伙伴能够自行研讨下，别的项目上，这些一系列文章，说的也是很大致的一些东西，开辟细节上的一些处置惩罚，这个要看项目需求，看对接的人等，在这里没法逐一申明，得靠小伙伴们本身因时制宜的处置惩罚。我写这一系列文章，愿望起到的作用的是授人以渔，不是授人以鱼。愿望能对人人有所协助。
到这里，项目实战就到这里高一段落了，然则文章不能停，今后有什么以为能够分享的，开辟了什么风趣的玩意，我会在第一时间分享。让人人一同交流下，一同进修下。
末了，照样那句话，有什么写的不好，或许写错了的，迎接斧正，让人人互相进修下，互相协助下。

4.往期回忆

webpack+vue项目实战（一,搭建运转环境和相干设置）
webpack+vue项目实战（二，开辟治理体系主页面）
webpack+vue项目实战（三，设置功用操纵页和组件的按需加载）
webpack+vue项目实战（四，前端与后端的数据交互和前端展现数据）