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 判断是否存在函数的方法
Jan 03 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
layui数据表格重载实现往后台传参
Nov 15 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
php 时间计算问题小结
2009/01/04 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
js Calender控件使用详解
2015/01/05 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
理解javascript封装
2016/02/23 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
Python tkinter事件高级用法实例
2018/01/31 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
函授自我鉴定范文
2014/02/06 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
远程培训的心得体会
2014/09/01 职场文书
刘胡兰观后感
2015/06/16 职场文书
员工聘用合同范本
2015/09/21 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书