vue在App.vue文件中监听路由变化刷新页面操作


Posted in Javascript onAugust 14, 2020

在路由跳转时,会出现页面需要重新刷新一遍才能获取数据加载页面,这时添加一个监听器,如果跳转到页面刷新一次。

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下面,就可以在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文件中监听路由变化刷新页面操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
JavaScript中数据结构与算法(一):栈
Jun 19 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
学习vue.js计算属性
Dec 03 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
js实现拖拽与碰撞检测
Sep 18 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 #Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 #Javascript
JS+css3实现幻灯片轮播图
Aug 14 #Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 #Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 #Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 #Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 #Javascript
You might like
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
页面使用密码保护代码
2013/04/10 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
JS & JQuery 动态添加 select option
2016/06/08 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
js实现密码强度检验
2017/01/15 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
python中的yield使用方法
2014/02/11 Python
python实现调用其他python脚本的方法
2014/10/05 Python
python运行时间的几种方法
2016/06/17 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
Pytorch之Variable的用法
2019/12/31 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
python中round函数如何使用
2020/06/19 Python
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
应届实习生的自我评价范文
2014/01/05 职场文书
学生会竞聘书范文
2014/03/31 职场文书
我的梦想演讲稿
2014/04/30 职场文书
走群众路线剖析材料
2014/10/09 职场文书
护理实习生带教计划
2015/01/16 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python