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 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
js 多浏览器分别判断代码
Apr 01 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
解决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
建立文件交换功能的脚本(三)
2006/10/09 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
BootStrap TreeView使用实例详解
2017/11/01 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
python和ruby,我选谁?
2017/09/13 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
Python内存读写操作示例
2018/07/18 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
Python进度条的制作代码实例
2019/08/31 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
公交公司毕业生求职信
2014/02/15 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
赔偿协议书范本
2014/04/15 职场文书
人事任命书怎么写
2014/06/05 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
导游词之湖北武当山
2019/09/23 职场文书
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers