vue裁剪公共部分和路由跳转清除定时器

最新推荐文章于 2022-11-15 14:27:25 发布
最新推荐文章于 2022-11-15 14:27:25 发布
阅读量266 收藏
点赞数
分类专栏： vue安装及使用 文章标签： vue裁剪公共部分 vue路由跳转清除定时器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Me_LiuHaoJie/article/details/99633104
版权
本文介绍了如何在Vue项目中裁剪公共部分，通过在App.vue中利用v-show或v-if根据路由判断是否渲染组件。同时讲解了在路由跳转时如何清除定时器，确保路由变化时不再保留不必要的定时任务。文中提供了监听路由变化的代码示例。
摘要由CSDN通过智能技术生成

裁剪公共部分

实现思路：在根组件App.vue中：在导航栏使用v-show或v-if条件渲染指令判断当前路由，再来决定是否渲染展示
（1）首先初始值肯定为true
首先初始值肯定为true
在这里插入图片描述
（2）监听路由变化：在app.vue 中监听$route 的变化，获取跳转到的路由信息，通过路由 进行判断即可
$route 表示(当前路由信息对象)
监听路由变化语法：
在这里插入图片描述
①to是要跳转的路由
②from是当前路由
③位置：
第一个参数为to表示即将 跳转的路由
第二个参数from表示当前路由
一定要按照顺序一一对应
代码

最低0.47元/天 解锁文章
_HaoJie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何找到vue项目路径_如何去除vue中访问路径#
weixin_34542865的博客
02-05 2589
用vue-cli搭建的vue项目，配置好路由，会看到： 不难发现#的出现真的不好看，这应该是vue默认hash模式，想要没有#，可以使用history模式，试过之后确实奏效！大家可以直接去看文档。对于vue开发的单页面应用，我们在切换不同的页面的时候，可以发现html永远只有一个，这也真是称之为单页面的原因，而vue-router默认 hash 模式——使用 URL 的 hash 来模拟一个...
如何去除vue中访问路径#
s_sos0的博客
11-01 98
直接如下图 添加 mode:'history',
vue之axios返回400...获取后台返回得信息
JessicaLi的博客
08-02 4521
this.$api.post('/api/liuyi/manager/app/add', this.$qs.stringify(this.form), }).then(response => { console.log(response) var data = response.data; ...
vue中切换页面清除定时器
冉冉胜起博客
07-14 1617
1.data中定义全局变量： intervalFlag: "", 2.mounted中创建定时器：5分钟执行一次loadTable方法 this.intervalFlag = setInterval(() => { this.loadTable(); }, 1000 * 5 * 60); 3.destroyed中清除定时器： destroyed () { //清空定时任务 if (this.intervalFlag) { clea
VUE设置和清除定时器
marsur的博客
10-26 1万+
keep-alive > 有缓存的作用，可以使被包裹的组件状态维持不变，当路由被 keep-alive 缓存时不走 beforeDestroy 生命周期。被包含在 < keep-alive > 中创建的组件，会多出两个生命周期钩子: activated 与 deactivated。在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用。该方法与在生命周期钩子beforeDestroy中清除定时器的操作原理一样，但更有优势。
vue相同路由跳转强制刷新该路由组件操作
10-14
在Vue.js应用中，路由是...在进行路由跳转和组件刷新时，理解Vue Router的工作原理至关重要，这可以帮助我们编写出更加灵活且可维护的代码。同时，遵循最佳实践和避免常见错误，如路由命名冲突，也能提高应用的质量。
vue路由事件beforeRouteLeave及组件内定时器的清除方法
10-17
今天小编就为大家分享一篇vue路由事件beforeRouteLeave及组件内定时器的清除方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue实现路由跳转和嵌套
08-30
Vue 实现路由跳转和嵌套 在 Vue 中实现路由跳转和嵌套是非常重要的，今天我们将介绍如何使用 Vue 实现路由跳转和嵌套。首先，我们需要安装 Vue Router，使用以下命令安装：`cnpm i vue-router -D` ### 配置路由 ...
关于vue中如何清除定时器的方法
qq_28013889的博客
11-15 1万+
vue中使用setTimeout定时器时，偶尔会存在无法清除的问题，即使是在组件销毁的时候将定时器清除也并不能解决该问题，文章中写了该问题存在的原因及解决方案
vue定时刷新及清除定时器
qq_43432157的博客
01-27 4796
首先确认< router-view >外层是否有包裹了一层< keep-alive > 如果有包裹： <template> <div> <keep-alive> <router-view /> </keep-alive> </div> </template> 在data中： data () { return { timer: null // 定
Vue切换页面时取消定时器
qq_45327886的博客
11-08 3002
Vue切换页面时取消定时器
vue路由事件beforeRouteLeave及组件内定时器的清除
热门推荐
Leayh
12-27 2万+
背景 之前在做ADTS项目的时候，首页是一个实时监测的页面，需要每隔5秒更新一次数据，而业务逻辑上的需要先请求告警列表的接口的，从告警列表中拿到数据再去获取其他的数据，所以我在获取告警列表的方法中增加了一个定时器。 最开始我是将定时器声明在组件内部的（由于页面不多，数据关联也不太强，所以项目中没有使用store进行数据管理），后来清除的时候发现无法清除，后来索性声明到window下了。...
vue路由跳转 定时器 没有清掉 ？
cofecode的博客
06-14 5528
项目中碰到的问题。 组件A 页面一加载，执行一个定时器，往控制台打印1 created:function() { this.t = window.setInterval(this.cons,1000) }, methods:{ cons () { console.log(1) } } 组件A能跳转到组件B，使用router-link 完成跳转。 此时在B组件页面...
vue路由变化后，计时器还在执行，怎么清除计时器
weixin_39494582的博客
04-10 9779
我遇到过一个类似的问题在组件A中设置了定时器，当路由变化加载组件B后，A中的定时器依然在运行，我在A中的beforeDestory和destoryed里都尝试清除定时器，但无效，请问怎么解决？ 我翻看了下vue生命周期 vue生命周期简介 注：Vue2.0 探索之路——生命周期和钩子函数的一些理解，原文链接Vue2.0 探索之路——生命周期和钩子函数的一些理解 我们用bef...
vue里面怎么删除部分页面_如何去除vue项目中的 # --- History模式
weixin_39784972的博客
12-19 460
使用vue-cli搭建的环境，在配置好路由之后，可以看到下面的情况：但是不难发现#的出现真的很丑陋，并且也不知道这是什么作用？所以就去Stack Overflow上搜索了，果然还有~ 看来Stack Overflow是真的强大，你在项目中遇到的问题实际上在so上都已经被问过并且解决了，这不：这是最高票的回答，即在vue2中将mode模式设置为history，试过之后确实奏效！但是知道这样可以解决...
vue切换路由清除定时器/防止定时器累加
wilL-my的博客
08-12 1953
var hAdsTimer = setInterval(function () { }, 5000) this.$once('hook:beforeDestroy',()=>{ clearInterval(hAdsTimer) })
vue 页面跳转 清除定时器setInterval 优化方案
晓风揽月
11-27 1万+
参考：https://www.cnblogs.com/woniubushinide/p/9282560.html vue 是单页面应用，路由切换后，定时器并不会自动关闭，需要手动清除，当页面被销毁时，清除定时器即可。 方案一： 首先我在data函数里面进行定义定时器名称： data() { return { ...
vue中实现定时刷新页面以及菜单定时自动跳转
qq_29124867的博客
05-27 1120
1、在mixins文件下新建mixinsMenu.js import { mapGetters } from 'vuex' import {getStore} from '@/utils/store' const boardMixins={ computed:{ ...mapGetters(['pageIndex']), userInfo(){ return getStore({name: 'userInfo'}) } }, created(){
vue中跳转路由时清除定时器
最新发布
03-07
在 Vue 中跳转路由时，可以在 beforeRouteLeave 钩子函数中清除定时器，代码示例如下： ``` beforeRouteLeave(to, from, next) { clearInterval(this.timer) next() } ``` 其中，this.timer 是在组件中定义的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值