webpack+vue项目实战（五，监听路由，实现同个页面不一样状态的切换）

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项目实战（四，前端与后端的数据交互和前端展现数据）