vue在App.vue文件中监听路由变化刷新页面操作
网络编程 2021-07-04 14:06www.168986.cn编程入门
这篇文章主要介绍了vue在App.vue文件中监听路由变化刷新页面操作,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
在路由跳转时,会出现页面需要重新刷新一遍才能获取数据加载页面,这时添加一个监听器,如果跳转到页面刷新一次。
export default { name: 'App', provide(){ return{ reload:this.reload } }, data(){ return { isRouterAlive:true, } }, //监听器 watch: { // 方法1 '$route' (to, from) { //监听路由是否变化 // console.log(999) if(to.path == "/"){ //跳转到哪个页面 location.reload() } }, }, methods:{ reload(){ this.isRouterAlive = false; this.$nextTick(function () { this.isRouterAlive = true }); }, }, }
补充知识:vue监听路由的改变和监听页面的刷新与离开
要分清两者的区别。
首先是监听页面的刷新与离开,此时相当于直接在这个网页中按了刷新,如果是webapp则是离开这个app而不是切换路由!
如果是用js的特性监测,则是不仅可以页面的刷新与离开,还能切换路由。注意当keepalive时即使切换了路由也无效。
在script中直接增加监听器监视beforeunload:
//监视如果页面离开 created() { window.addEventListener('beforeunload', this.updateHandler) }, beforeDestroy() { this.finalItemDetail(); // 自己要进行的操作 }, destroyed() { window.removeEventListener('beforeunload', this.updateHandler) },
然后methods中添加finalItemDetail和updateHandler方法:
updateHandler() { this.finalItemDetail() }, finalItemDetail() { console.log('刷新或关闭'); },
如果想监听某个特定的页面的离开,比如我现在在/index下,现在去了/index/001狼蚁网站SEO优化,就可以在watch中监听路由的变化,前提是实用vue-router。
如果是简单的判断路由变化可以用注释掉的,直接执行clear方法(自己定义在methods中)
但是注意这个只能监听自己子路由的变化!
watch: { // 如果路由有变化,会再次执行clear方法 // "$route": "clear", $route(to , from){ console.log( to.path, from.path ); this.clear(to.path); } },
然后我还额外做了个判断:
clear(path) { if(path!="/item/item01/evaluate") console.log("从这个页面离开了"); this. active=0; },
以上这篇vue在App.vue文件中监听路由变化刷新页面操作就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- socket网络编程 socket网络编程Socket基础
- 少儿编程培训班 少儿编程培训班教学方法
- linux系统编程:Linux系统编程多线程基础
- unix环境高级编程 首发于 UNIX环境高级编程学习之
- 学编程学哪一种比较好 初学者哪种编程语言比较
- 学PLC编程学费多少
- 计算机编程入门 学计算机编程入门的初学指南
- 世界编程语言排行榜
- vba编程培训:Excel VBA编程培训初学者教程
- 少儿编程课程:少儿编程学什么及各年龄段如何
- 游戏编程入门:少儿游戏编程入门的技巧
- 学编程哪个培训机构好 编程培训机构哪个好
- 编程机器人加盟 机器人编程加盟哪家好
- 在线少儿编程机构排名
- 电脑编程入门自学
- 服务器系统下载:服务器系统的安装