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 Ajax异步处理Json数据详解
Nov 05 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
微信小程序实现收货地址左滑删除
Nov 18 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
JS数组方法some、every和find的使用详情
Oct 05 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
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
php如何获取文件的扩展名
2015/10/28 PHP
php实现三级级联下拉框
2016/04/17 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
javascript 函数调用规则
2009/08/26 Javascript
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
python模块导入的细节详解
2018/12/10 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
python实现连连看游戏
2020/02/14 Python
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
护理专业优质毕业生自荐书
2014/01/31 职场文书
行政内勤岗位职责
2014/04/07 职场文书