vue 判断页面是首次进入还是再次刷新的实例


Posted in Javascript onNovember 05, 2020

我就废话不多说了,大家还是直接看代码吧~

<template>
  <div>
   判断页面是首次进入还是再次刷新
  </div>
</template>
 
 <script>
export default {
  data(){
    return{
       
       }
    },
 
  mounted () {
   //第一种方法
   // if(window.name == ""){
   // console.log("首次被加载");
   // window.name = "isReload"; // 在首次进入页面时我们可以给window.name设置一个固定值 
   // }else if(window.name == "isReload"){
   // console.log("页面被刷新");
   // }
   //第二种方法
   if (window.performance.navigation.type == 1) {
    console.log("页面被刷新")
   }else{
    console.log("首次被加载")
   }
  },
 
  methods: {
   
  },
 
  }
</script> 

<style scoped> 
</style>

补充知识:VUE-Router 同一页面第二次进入不刷新 问题以及几个解决方案

最近正好遇到一个问题,修改用户的头像,修改后再进入用户主页,发现改了之后即使数据变了。。页面也不会重新渲染。。。

下面提供集中解决方案来给予大家参考:

1. 可以在刷新的页面定义一个参数, 这样每次都会渲染出不同的页面:

route 实例化命名配置:

{
      // 用户信息
      path: '/accountDetail/:randKey',
   name: 'accountDetail',
   component: accountDetail,
   meta: {requiresAuth: true}
 },

跳转 的地方配置:

var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
 var maxLength = 15;
    var res = '_jsonpphotochange';
    for (var i = 0; i < maxLength; i++) {
      var id = Math.ceil(Math.random() * 35);
      res += chars[id];
    }
    // res 为随机字符串,下面是跳转:
 this.$router.push('/accountDetail/' + paramsAccount);

2. 可以让全局的页面都重载,这个比较狠冗余也多,慎重点用:

在App.vue下修改:

<template>
 <div id="app" class="app">
  <transition :key="key">
  <router-view class="router-view"></router-view>
  </transition>
 </div>
 </template>
 <script type="text/ecmascript-6">
 // import {mapState} from 'vuex';
 export default {
  name: 'app',
  computed: {
  key() {
   return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date();
  }
  }
 };
 </script>
// 就是在template下加一对标签<transition></transition> 加上key的属性,不过官网说 如果防止组件的复用就用这个 还是比较推荐这个方法的。

3. watch 来检测路由变化。。缺点是,有时候会莫名出现 点两次的情况,也就是你要跳转会跳转两次。。有人说是进来会执行一次跳转回执行一次,不过我觉得不太像。。希望有能人士指点。。

watch: {
 '$route' (to, from) {
  this.httpGetUserInfo(); // 这是我ajax获取用户信息的方法
 }
 }
 // 这样每次路由执行就会运行这个方法,第一次打开不会运行,你需要用created()方法来执行下ajax方法。

以上这篇vue 判断页面是首次进入还是再次刷新的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery插件 tabBox实现代码
Feb 09 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
javascript中sort() 方法使用详解
Aug 30 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
vue视频播放暂停代码
Nov 08 Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 #Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 #Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 #Javascript
如何利用vue实现波谱拟合详解
Nov 05 #Javascript
关于Vue中$refs的探索浅析
Nov 05 #Javascript
JavaScript 实现轮播图特效的示例
Nov 05 #Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 #Javascript
You might like
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
Vue实现导航栏菜单
2020/08/19 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
python中urlparse模块介绍与使用示例
2017/11/19 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
如何提高SQL Server的安全性
2016/07/25 面试题
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
迟到检讨书大全
2014/01/25 职场文书
业务部主管岗位职责
2014/01/29 职场文书
国培教师自我鉴定
2014/02/12 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
校园绿化美化方案
2014/06/08 职场文书
军训拉歌口号
2014/06/13 职场文书
董事长开业致辞
2015/07/29 职场文书
交通事故协议书范本
2016/03/19 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android