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 图片上一张下一张链接效果代码
Mar 12 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
AngularJS自动表单验证
Feb 01 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 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 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
php生成动态验证码gif图片
2015/10/19 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
PHP实现微信退款功能
2018/10/02 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
jQuery 处理表单元素的代码
2010/02/15 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
python标记语句块使用方法总结
2019/08/05 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
详解HTML5新增标签
2017/11/27 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
专科毕业生自我鉴定
2013/12/01 职场文书
计算机专业优秀大学生自我总结
2014/01/21 职场文书
环保倡议书怎么写
2014/05/16 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
植物园观后感
2015/06/11 职场文书
教你用python实现12306余票查询
2021/06/30 Python
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL