一，使用keep-alive标签减少ajax请求

原因是切换页面的时候，这两个页面都需要重新渲染，都会执行这个生命周期函数：

可以改写成这样：

这个标签的作用就是，让其中的内容只有在第一次获取数据时发起ajax请求，然后后续的数据直接从内存中获取。
也就是接下来，无论切换多少次页面，这个请求只有第一次发起。

二，让选择城市之后的首页根据城市的不同而进行页面的渲染

像这样，选择好城市，回到首页时，我们又希望有ajax请求的发起，更新渲染首页内容为对应城市的页面：
要区分对应的城市，发起的ajax请求必然需要携带区分城市信息的参数：

第一步：修改axios请求，让它携带参数：

这样，每次发起axios请求都会携带城市的信息。
但是之前在添加了keep-alive标签。页面除了第一次渲染首页时会进入mounted生命周期函数之外，其他时候返回首页都不会再触发这个生命周期函数，也就是不会发起ajax请求，那如何让它发起ajax请求呢？
还有一个生命周期函数activated()

一进入页面就触发；可用于初始化页面数据等

所以可以在这里也发起请求，获取数据：

慕课网仿去哪儿项目笔记--（四）-城市页面的优化相关推荐

UNIAPP实战项目笔记43 购物车页面修改收货地址和修改默认地址
UNIAPP实战项目笔记43 购物车页面修改收货地址和修改默认地址实际案例图片修改收货地址和修改默认地址页面布局和功能具体内容图片自己替换哈,随便找了个图片的做示例用到了vuex的状态机,具体 ...
UNIAPP实战项目笔记45 订单页面布局完成和数据渲染
UNIAPP实战项目笔记45 订单页面布局完成和数据渲染实际案例图片订单页面具体内容图片自己替换哈,随便找了个图片的做示例具体位置见目录结构通过模拟数据list 来实现数据渲染完善布局页 ...
慕课网前端JS面试技巧笔记
前言关于面试前端水平的三个层次基层工程师-基础知识高级工程师-项目经验架构师- 解决方案几个面试题题目很多,做具有代表的题目,举一反三 js 中使用 typeof 能得到哪些类型 (== ...
五子棋的实现“慕课网五子连珠的笔记”
慕课网的视频首先创建了一个类,这个类继承了View,去实现这个类的构造方法,实现其两个参数的构造方法,老师建议自己写的过程中对这些构造方法都进行实现. 在布局文件中对这个类进行使用,注意是包名.宽高 ...
慕课网--网上商城mmall项目---部署手记
1.先在服务器部署好java,maven,nodejs环境. 2.然后安装nginx,tomcat,vsftp,git(一般默认会有)等软件 , 其中vsftp安装过程参照我上一篇文章. 3.在慕课网 ...
react 网易云音乐实战项目笔记
0.项目规范一.路由相关 npm i react-router-dom npm i react-router-config // 用于配置路由映射的关系数组 1. 路由重定向访问 /路径 => ...
慕课网初识python_初识Python笔记
初识Python 基本数据类型基本数据类型: 整数十六进制用0x前缀和0-9,a-f表示浮点数整数运算永远是精确的,而浮点数运算则可能会有四舍五入的误差字符串以''或"" ...
（仿头条APP项目）5.列表页面设计实现
文章目录列表页面设计效果图具体实现添加Glide依赖添加主页面和两个列表布局用GsonFormat快速创建NewListData实体类存放新闻列表数据 MyApi添加一个获取新闻列表的方法 ...
（仿头条APP项目）3.二级页面首页的ViewPager页面切换
文章目录二级页面首页的ViewPager页面切换效果展示代码实现创建几个三级页面Fragment视图 ViewPager的Fragment数据丢失问题创建fragment_home视图文件 ...
《如何优化项目一》：页面缓存优化
前言叙述

慕课网仿去哪儿项目笔记--（四）-城市页面的优化

一，使用keep-alive标签减少ajax请求

二，让选择城市之后的首页根据城市的不同而进行页面的渲染

第一步：修改axios请求，让它携带参数：

慕课网仿去哪儿项目笔记--（四）-城市页面的优化相关推荐

最新文章

热门文章