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 相关文章推荐
Javascript 事件流和事件绑定
Jul 16 Javascript
有效的捕获JavaScript焦点的方法小结
Oct 08 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
js时间控件只显示年月
Jan 08 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
JS精确判断数据类型代码实例
Dec 18 Javascript
JavaScript组合继承详解
Nov 07 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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
thinkphp分页集成实例
2017/07/24 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
python自然语言编码转换模块codecs介绍
2015/04/08 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
python实现简易版计算器
2020/06/22 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
Python Selenium库的基本使用教程
2021/01/04 Python
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
薪酬专员岗位职责
2014/02/18 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
趣味运动会简讯
2015/07/20 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
Python机器学习之决策树和随机森林
2021/07/15 Javascript
Java字符串逆序方法详情
2022/03/21 Java/Android