首页 > 其他分享 >查询列表进入详情后返回保留查询条件(vue)

查询列表进入详情后返回保留查询条件(vue)

时间:2022-10-27 15:55:30浏览次数:48  
标签:缓存 isBack 钩子 列表 vue mounted 查询 true 路由

这个功能需要用到缓存<keep-alive>,缓存实现过程实现如下:

1、layout中的AppMain组件中判断$route.meta.keepAlive。

 

 

2、然后在需要缓存的列表页面的beforRouteEnter函数中将该页面路由的keepAlive设为true,判断路径来源是否它的详情页,如果是就在该路由下增加isBack参数为true,否则为false。

3、页面设为缓存后,首次加载会进入mounted函数,之后切换路由就会变成activated函数,所以在mounted中请求初始数据,在activated中判断路由中isBack参数是否为true,为true需要缓存,不重新请求数据,但需要将isBack设为false,以便下次判断,isBack参数为false说明不是从详情页进入,这种情况就需要查询条件重置,重新请求数据了。

注意: 页面设置缓存后,路由跳转不在走destroyed和mounted钩子,会走activated和deactivated钩子,若使用v-if的情况,则会走mounted和destroyed钩子,所以在需要销毁监听以及定时器之类的操作时需要在destroyed和deactivated钩子中都要写销毁逻辑。

标签:缓存,isBack,钩子,列表,vue,mounted,查询,true,路由
From: https://www.cnblogs.com/bella99/p/16832538.html

相关文章

  • vue3-code-diff
    vue3-code-diffVue2/Vue3可用的codediff插件是vue-code-diff安装#WithNPMnpmiv-code-diff#WithYarnyarnaddv-code-diff全局注册import{createA......
  • 解决vue报错 Failed to mount component: template or render function not defined.
    今天npmrundev的时候,有个页面报错,提示[Vuewarn]:Failedtomountcomponent:templateorrenderfunctionnotdefined.昨天还好好的,今天就报错了,也没改啥。经过查资......
  • Vue面试题41:如何监听vuex状态变化?(总结自B站up主‘前端杨村长’视频,仅供自用学习)
    vuex数据状态是响应式的,所以状态变视图跟着变,但是有时还是需要知道数据状态变了从而做一些事情,既然状态都是响应式的,那自然可以使用watch,另外vuex也提供了订阅的API:stor......
  • vue源码分析-事件机制
    这个系列讲到这里,Vue基本核心的东西已经分析完,但是Vue之所以强大,离不开它提供给用户的一些实用功能,开发者可以更偏向于业务逻辑而非基本功能的实现。例如,在日常开发中,我们......
  • 【vue】打包后dist无法运行和显示问题
     执行npmrunbuild生成dist静态目录 打开index.html无法显示,是因为找不到目录,将里面的引用路径修改即可修改后可能部分图片无法正常显示,因为还有其它路径的需要切......
  • vue+mysql实现前端对接数据库
    下载引入相关依赖1、cnpminstall--savemysql2、cnpminstall--saveaxios3、cnpminstall--savebody-parser4、cnpminstall--saveexpress5、cnpminstall--......
  • vue之数据绑定
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-......
  • postgresql dblink垮库查询
    环境:OS:Centos7DB:13.8 1.赋予普通用户超级用户权限因为创建扩展需要超级用户的权限,否则报如下的错误:db_test=>createextensiondblink;ERROR:permissiondenie......
  • vue设置元素高度自适应
    VUE设置元素高度自适应<divref="element":style="{height:`${elementHeight}px`}"></div>data(){return{elementHeight:50}},mounted:fun......
  • Vue常用指令(精简)
    #Vue系列##el:挂载点demo01.html-vue实例作用范围:vue会管理el选项命中的元素及其内部的后代元素,可以使用其他选择器(class、el标签),建议使用id选择器,因为id是唯一的。......