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 21 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
Node学习记录之cluster模块
May 31 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
vuex的使用步骤
Jan 06 Vue.js
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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
利用Python如何生成便签图片详解
2018/07/09 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
2014年会策划方案
2014/05/11 职场文书
高效课堂标语
2014/06/26 职场文书
文明好少年事迹材料
2014/08/19 职场文书
实习单位意见
2015/06/04 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
你会写请假条吗?
2019/06/26 职场文书
golang 实用库gotable的具体使用
2021/07/01 Golang
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle
使用Python获取字典键对应值的方法
2022/04/26 Python
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL