项目笔记12（尚品汇）

typeNav商品分类列表的优化

当前项目存在着如下问题：当 typeNav组件调用的时候，页面就会发送一个请求，如果反复切换home和search页，就会反复发请求，影响性能。如图所示

为了解决这个问题，我们可以把原来在typeNav挂载完成后发送请求的代码移到app.vue文件的挂载完成生命钩子中，因为app.vue只会调用一次（注意别放在入口文件main.js中，因为里面没有$route）。这就解决了多次发送的影响具体步骤如下。此时只会发送一次请求。

合并参数（params与query）

目前项目存在一个问题就是，当通过三级联动进入search后在从搜索框输入数据会导致传输的数据丢失。同理当从搜索框输入数据后再点击三级联动也会产生数据丢失。具体问题如下所示


针对这种情况就需要合并参数。具体步骤如下，首先找到三级联动组件，找到路由跳转。在跳转前先进行一个判断，如果在跳转前发现有params数据，就保留下来。同理在首页的路由跳转也进行一个判断，如果在跳转前发现有query数据，同样保留下来。具体代码如下所示。


修改完成后，同样按照上述步骤先点击三级联动组件的电子书，再点击搜索新书，现在的结果如下。同理先点击新书再点击三级联动组件的电子书也是同样的结果。