关于wacth监听路由和keep-alive遇到的坑点

最新推荐文章于 2023-02-13 23:32:21 发布
最新推荐文章于 2023-02-13 23:32:21 发布
阅读量596 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46627254/article/details/106760422
版权

今天做项目简单记录一下碰到的坑点。
首先
项目整体部分页面路由是被缓存起来的，为的是优化性能避免重复刷新
这个时候登录项目点击其中一个页面后，返回后在点击任何页面都会触发这个已经点击页面的wacth监听执行方法，我的理解是路由被keep-alive缓存起来了，没有被销毁才引起的这种触发机制
解决思路
v-if 判是否进入这个路由，如果为
true 那么执行这个wacth方法

浅蓝色·
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
keepAlive缓存的使用，监听路由
dianlupeng4187的博客
07-10 754
1.缓存组件： 组件路由routers.js页面添加keepAlive:true { path: 'supplierList', name: 'supplierList', meta: { title: '供应商列表', keepAlive: true }, component: () => import('@/view/data-base/suppl...
keep-alive时watch路由route引起的问题用activated解决
lk_123456的专栏
01-16 2215
不添加keep-alive每次进入页面都会重新渲染页面，添加了keep-alive后只渲染一次。但是有个小问题： 动态路由的参数改变后，还是加载以前的页面，created中的数据请求不执行。 此时如果在watch中监听$route是可以的，如果监听到 route 参数变了就重新请求数据（created 中的函数）。 上面方法可以解决，但是由于页面是 keep-alive 的，所以只要路由变了（如...
vue使用keep-alive后watch事件不销毁解决方案
jstljspservlet的博客
03-30 4034
使用了keep-alive动态缓存页面之后，有一些很难解决的问题： 每个页面里面设置的watch监听事件，如果监听了路由的变化或者vuex的变化，在切换页面的时候不会被销毁 页面上的一些方法会被叠加触发，不知道是不是监听了路由的原因，导致每次切换页面，很多方法会被重复叠加的触发，比如切换第一次触发2次，切换第2次触发3次，第3次触发4次，类似这样的情况 解决方案： 定义一个全局 mixin.j...
keep-alive缓存组件（不销毁）
Nikki_u的博客
03-17 166
<keep-alive include="UserName" exclude="UserInfo"> <component :is="comName"></component> </keep-alive> 与keep-alive配合使用的两个钩子函数 当使用keep-alive时 切换页面后使用created钩子函数在本地储存的值不能动态渲染到页面 这时需要配合activated和deactivated使用 生命周期activated--激活时-显示.
Vue keep-alive后不能触发destroyed
u012174809的专栏
05-13 3828
<keep-alive :include="cachedViews"> <router-view :key="key" /> </keep-alive> 当我们在项目中配置了keep-alive后，会发现页面关闭不能触发beforeDestroy。 首先我们来看看keep-alive是什么东西 keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁。 它的作用不言而喻 用来...
vue添加keep-alive缓存后,不能调用销毁(destroyed)事件,刷新或者关闭浏览器事件监听后调用接口(我这里是因为录像异常需要结束录像)
qq_62452129的博客
09-02 809
录像我使用的是webetc(延迟很低,换了很多种这种延迟最低),因为加了缓存后只能调用activated和deactivated,在这里就不再解释这俩生命周期是干什么用的了,因为关闭浏览器和刷新浏览器是同步事件,而调用接口是异步事件,在这里请求接口我使用的是axios,在执行完同步事件的时候,浏览器已经刷新了,并不会去调用异步操作,所以只能使用原生的获取事件。xhr.open('GET', '接口地址',true);// 这里必须是true,并且不可以删除 因为默认是false。// 切换录像已经结束。
基于vue中keep-alive缓存问题的解决方法
01-19
但是一般在路由上都会加上keep-alive保持数据的状态，除非强制无缓存刷新，这就导致第一次进入详情页面时，可以在created中拿到id，但是返回后，再点击进入，就不会再走相应的生命周期了，无法拿到新的id ...
使用watch监听路由变化和watch监听对象的实例
01-21
一、watch监听路由变化 解决办法： export default{ data(){ return{} }, watch:{ $route:getPath // 监听事件 }, methods:{ getPath(){ let path = this.$roune.path; //或得当前路径 进行逻辑判断 } } } 二、...
vue.js使用watch监听路由变化的方法
12-11
watch除了可以监听数据的变化，路由的变化也能被其监听到 效果如下： 具体代码 当路由发生变化后，在watch中写具体的业务逻辑 let vm = new Vue({ el: "#app", data: {}, router, watch: { '$route.path': ...
vue中使用watch监听路由导致多次请求问题解决方法
weixin_45357661的博客
10-26 8053
vue中使用watch监听路由导致多次请求问题解决方法
vue项目里keepAlive、嵌套路由keepAlive的正确使用方法，以及遇到的问题
abcd123596的博客
02-13 4658
关于keepALive搭配路由使用的一些方法，以及处理keepALive嵌套路由存在的问题。 router-view、include
在el-dialog中进行Vue的路由跳转，跳转后出现遮罩层？
不知名人士的博客
09-26 5534
某个需求需要在路由 /systemSettle/Application 的一个页面中的对话框中进行路由跳转，至另一个页面下，如图所示（涉及公司内部业务，已部分打码）： 点击跳转之后，跳转至路由 /systemSettle/payways 下的页面。如图所示： 但是此时发现页面被一整个遮罩层遮住了，页面中的内容都无法点击，这是什么情况???? 打开控制台，如图所示： 果然有个遮罩层，这是哪里来的呢？原来我以为是项目中封装的，但是搜索了一下并没有这个东西。于是去ElmentUI的官网找一下el-dialo
【keep-alive 中使用 show-overflow-tooltip 切换路由 tooltip 不消失的简单解决办法】
我不信走不到天明
01-18 884
tooltip loading
Vue keep-alive 缓存路由和刷新路由
℡メ㏑╭ァ小凯
03-03 3815
1、路由不缓存的时候：tab左右切换页面都会自动刷新，表现形式：工作台Radio选中，然后点DemoTab，再点会工作台，Radio不选中了 <router-view :key="rootkey" style="margin: 5px" /> 2、加上Keep-alive后，实现Tab切换页面状态保存 ，比如工作台文本框写的123，切换tab回来后还显示123，不会清空 <keep-alive> <router-view style="ma...
vue内置组件keep-alive多级路由缓存最佳实践
小陈的博客
10-30 2700
keep-alive缓存多级路由，主要思路根据路由的meta标识，然后在App.vue组件中keep-alive包裹路由标签，我们通过全局store变量去控制includes判断当前路由是否该被缓存，同时需要监听路由判断是否有需要缓存，通过设置全局cachePage去控制路由的缓存* 优化store数据流代码，可以减少代码，提高的代码模块的复用度* 当一个组件被缓存时，加载该缓存组件时是会触发activated钩子，当从一个缓存组件离开时，会触发，在特殊场景可以在这两个钩子函数上做些事情* 简略剖析。
vue.js中使用vue-router路由功能之created生命周期钩子方法和watch侦听器属性，keep-alive介绍
水月灯花的博客
07-28 990
一、路由之生命周期created钩子方法和watch侦听器 1、如果只是在同一个组件中，使用路由功能，例如在同一个路由地址，只是传递的参数不同， /list?status=doing /list?status=finish 只是status状态不同，/list?status=doing 导航到/list?status=finish，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。因此生命周期函数 无法再次被执行.
Vue keep-alive 详细介绍（动态组件、路由组件缓存优化）
高大志leo的博客
12-15 4986
用法 keep-alive 是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。当组件在<keep-alive>内被切换，它的activated和deactivated这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中，activated和deactivated将会在<keep-ali...
新后台遇到的问题
dianaie2303的博客
04-02 228
1、element UI的select multiple是设置默认值 默认值需要是数组格式 2、element UI的table 传参数2种 @click="handleDelete(scope.$index, scope.row)" //写法 handleDelete(scope.$index, scope.row) //调用 ...
vue3+ts 路由 动态keep-alive 缓存
最新发布
07-11
在 Vue 3 中使用 TypeScript 和路由结合动态 keep-alive 缓存，你可以使用 Vue Router 和 `<keep-alive>` 组件来实现。 首先，确保你已经安装了 Vue Router 和 Vue 3 的相关依赖。然后，在路由配置中添加 `meta` 字段来指定需要缓存的组件。 ```typescript // router.ts import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'; const routes: Array<RouteRecordRaw> = [ { path: '/', name: 'Home', component: () => import('@/views/Home.vue'), meta: { keepAlive: true // 将需要缓存的组件设置为 true } }, // 其他路由配置... ]; const router = createRouter({ history: createWebHistory(), routes }); export default router; ``` 接下来，在根组件中使用 `<router-view>` 和 `<keep-alive>` 组件来实现动态缓存。 ```vue <template> <div> <router-view v-slot="{ Component }"> <keep-alive> <component :is="Component"></component> </keep-alive> </router-view> </div> </template> <script> import { onMounted, watch } from 'vue'; import { useRouter } from 'vue-router'; export default { setup() { const router = useRouter(); // 监听路由变化，判断是否需要缓存组件 watch( () => router.currentRoute.value, (to, from) => { if (to.meta.keepAlive && from.meta.keepAlive) { // 如果前后两个路由都需要缓存，则手动触发组件的生命周期钩子 const component = router.currentRoute.value.matched[0].components.default; component.__vccOpts && component.__vccOpts.activated && component.__vccOpts.activated(); } } ); // 在初次加载时手动触发根组件的生命周期钩子 onMounted(() => { const component = router.currentRoute.value.matched[0].components.default; component.__vccOpts && component.__vccOpts.activated && component.__vccOpts.activated(); }); } }; </script> ``` 在上面的示例中，我们在路由配置中将需要缓存的组件的 `meta.keepAlive` 设置为 `true`。然后，在根组件中使用 `<router-view>` 来渲染当前路由匹配的组件，并将其包裹在 `<keep-alive>` 组件中。 通过监听路由变化，我们可以判断前后两个路由是否都需要缓存。如果是，则手动触发组件的 `activated` 生命周期钩子，以确保组件被正确缓存和激活。 请注意，这里我们使用了 Vue 3 的 Composition API 来编写逻辑。确保你的项目已经配置了相关依赖并支持 Composition API。 希望这个示例对你有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值