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.往期回顾

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏后端云

Raft算法和Gossip协议

raft 集群中的每个节点都可以根据集群运行的情况在三种状态间切换:follower, candidate 与 leader。leader 向 follower...

2773
来自专栏linux运维学习

linux学习第二十七篇:使用w查看系统负载,vmstat,top,sar,nload命令

使用w查看系统负载 w/uptime的命令结果是一样的 ? 1. 第一行从左面开始显示的信息依次为:时间,系统运行时间,登录用户数,平均负载。 ...

2337
来自专栏马涛涛的专栏

使用leancloud给简历加数据库,实现留言功能

数据必须存在服务器上,这样任何设备访问服务器都可以得到数据,如果存在客户端的本地,那么其他客户端设备无法读取到.所以数据必须存储在服务器的数据库上

1685
来自专栏喵了个咪的博客空间

[喵咪PHP]页面显示空白问题

#[喵咪PHP]页面显示空白问题# ? ##前言## 哈喽!大家好啊,喵咪PHP第一次和大家见面了,熟悉的朋友呢也之道喵咪我也开了喵咪Liunx和喵咪Golan...

33911
来自专栏前端知识铺

tinypng upload一键压缩上传工具,告别人肉

有兴趣的可以玩一玩,因为平时经常会用到图片压缩,上传,如果你也觉得很繁琐的话,这个将会解决你的痛点。

1716
来自专栏源码之家

新浪应用Dzx!Sae完美反向代理绑米教程

1824
来自专栏Linux驱动

38.Linux驱动调试-根据系统时钟定位出错位置

当内核或驱动出现僵死bug,导致系统无法正常运行,怎么找到是哪个函数的位置导致的? 答,通过内核的系统时钟,因为它是由定时器中断产生的,每隔一定时间便会触发一次...

22110
来自专栏FreeBuf

如何通过Emond在macOS上实现持久化访问

在这篇文章中,我们会介绍如何通过emond在macOS上实现持久化访问。根据苹果公司的说法,事件监视进程(emond)会“接受来自各种服务的事件,通过一个简单的...

2009
来自专栏晨星先生的自留地

django(1)初次见面-我叫姜哥

1425
来自专栏*坤的Blog

Word文件乱码XML

2322

扫码关注云+社区