vue watch 第一次不执行_Vue 实现前进刷新,后退不刷新的效果
https://github.com/woai3c/Front-end-articlesgithub.com
需求一:
在一个列表页中,第一次进入的时候,请求获取数据。
点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷新。
也就是说从其他页面进到列表页,需要刷新获取数据,从详情页返回到列表页时不要刷新。
解决方案
在 App.vue
设置:
<keep-alive include="list"><router-view/>
</keep-alive>
假设列表页为 list.vue
,详情页为 detail.vue
,这两个都是子组件。
我们在 keep-alive
添加列表页的名字,缓存列表页。
然后在列表页的 created
函数里添加 ajax请求,这样只有第一次进入到列表页的时候才会请求数据,当从列表页跳到详情页,再从详情页回来的时候,列表页就不会刷新。 这样就可以解决问题了。
需求二:
在需求一的基础上,再加一个要求:可以在详情页中删除对应的列表项,这时返回到列表页时需要刷新重新获取数据。
我们可以在路由配置文件上对 detail.vue
增加一个 meta
属性。
{path: '/detail',name: 'detail',component: () => import('../view/detail.vue'),meta: {isRefresh: true}},
这个 meta
属性,可以在详情页中通过 this.$route.meta.isRefresh
来读取和设置。
设置完这个属性,还要在 App.vue
文件里设置 watch 一下 $route
属性。
watch: {$route(to, from) {const fname = from.nameconst tname = to.nameif (from.meta.isRefresh || (fname != 'detail' && tname == 'list')) {from.meta.isRefresh = false// 在这里重新请求数据}}},
这样就不需要在列表页的 created
函数里用 ajax 来请求数据了,统一放在 App.vue
里来处理。
触发请求数据有两个条件:
- 从其他页面(除了详情页)进来列表时,需要请求数据。
- 从详情页返回到列表页时,如果详情页
meta
属性中的isRefresh
为true
,也需要重新请求数据。
当我们在详情页中删除了对应的列表项时,就可以将详情页 meta
属性中的 isRefresh
设为 true
。这时再返回到列表页,页面会重新刷新。
解决方案二
对于需求二其实还有一个更简洁的方案,那就是使用 router-view 的 key
属性。
<keep-alive><router-view :key="$route.fullPath"/>
</keep-alive>
首先 keep-alive 让所有页面都缓存,当你不想缓存某个路由页面,要重新加载它时,可以在跳转时传一个随机字符串,这样它就能重新加载了。 例如从列表页进入了详情页,然后在详情页中删除了列表页中的某个选项,此时从详情页退回列表页时就要刷新,我们可以这样跳转:
this.$router.push({path: '/list',query: { 'randomID': 'id' + Math.random() },
})
这样的方案相对来说还是更简洁的。
vue watch 第一次不执行_Vue 实现前进刷新,后退不刷新的效果相关推荐
- vue移动端过渡动画_Vue.js实现微信过渡动画左右切换效果
前言 需要用到的技术栈:Vue+Vuex 先看看效果图 过渡动画 示例代码 router.beforeEach(function (to,from,next) { const toIndex = hi ...
- vue移动端过渡动画_Vue仿微信app页面跳转动画效果
10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面 ...
- vue delete删除json数组_vue面试题总结(二)
" 关注 前端开发社区 ,回复"1"即可加入 前端技术交流群,回复 "2"即可免费领取 500G前端干货! 16.vue路由传参数 1.使用query ...
- vue webpack 自动打开页面_vue中webpack技术详解
1.为什么要使用webpack: 因为我们想把资源整合.如在项目index.html文件中为了请求变得更少我们可以新建一个叫main.js的项目入口文件(里面有引用其它的各种资源,而index.htm ...
- vue 多选自动触发_Vue,初次邂逅(二)
一.前言 二.Vue常用指令 2.1 什么是指令? 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的预期值是:单个 JavaScript 表达式.指令的职责是,当表达式的值改变 ...
- vue 请求时方法执行顺序问题,异步请求无法同时处理多个接口,使用同步顺序执行:async/await使用
vue 请求时方法执行顺序问题,异步请求无法同时处理多个接口,使用同步顺序执行:async/await使用 异步解决方案:async/await 多个await,同步拿到数据再处理 多个接口处理拿到数 ...
- php 命令行 循环,Linux_批处理的循环效果脚本,第一次运行 执行命令工A 第 - phpStudy...
批处理的"循环"效果脚本 第一次运行 执行命令工A 第二次运行 执行命令工B 第三次运行 执行命令工A ................ 原理很简单 用if exist 判断 第一 ...
- vue判断离开当前页面_vue离开当前页面触发的函数代码
vue离开当前页面触发的函数代码 我就废话不多说了,大家还是直接看代码吧~ destroyed(){ console.log('销毁') } 补充知识:vue中进入路由页面和离开路由页面后执行函数 进 ...
- 使用Yarn全局安装@vue/cli,无法执行vue命令的解决方案
使用Yarn全局安装@vue/cli,无法执行vue命令的解决方案 使用Yarn全局安装@vue/cli,无法执行vue命令的解决方案 使用Yarn全局安装@vue/cli,无法执行vue命令的解决方 ...
最新文章
- dsst依赖opencv
- HTML自动换页相册,html版电子相册翻书特效
- 【Python Turtle合集】”外面的花已经开得很像样了, 我看到风拥作一团, 前来庆贺“(春天来啦~)
- Netty实战 IM即时通讯系统(八)服务端和客户端通信协议编解码
- Python | 程序从列表中删除范围内的所有元素
- bert 多义词_广告行业中那些趣事系列15:超实用的基于BERT美团搜索实践
- 说说我心中的Linux系统
- 奥特曼在银行里下象棋的梗
- [2018.07.14 T3] B君的第六题
- PDF转Word时提示有密码两种常用解密技巧分享
- 微信小店开发(1) 获取分类
- Benzoic acid,4-(((diphenylamino)carbonyl)oxy)-3-nitro,2-硝基-4-羧基苯基-N,N-氨基甲酸二苯酯,2-Ncdc
- tcpdump 文件权限相关问题
- 自然语言处理之中文文本分析(jieba分词、词袋doc2bow、TFIDF文本挖掘)
- java 数组形式字符串_java 数组格式字符串转化为字符串
- 基于linux的oracle_rac实时应用集群研究,基于Linux的OracleRAC实时应用集群研究毕业设计论文(资料4)...
- 广讯通服务器修复,广讯通设置服务器地址
- Windows下代码比较工具Meld diff 以及 VScode配置,解决“Meld Diff Error: Error running diff command! StdErr: ‘meld‘ �
- python opencv 三维重建_【python+opencv实现基于图片序列的三维重建】 - #1
- NMN产品是什么性质,nmn产品之间效果差异,学会取舍