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图片自动或手动切换示例附演示源码
Sep 04 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 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+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
python求pi的方法
2014/10/08 Python
python中循环语句while用法实例
2015/05/16 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
历史学专业推荐信
2013/11/06 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
保证书范文大全
2014/04/28 职场文书
公司承诺书范文
2014/05/19 职场文书
导游词之崇武古城
2019/10/07 职场文书
数据设计之权限的实现
2022/08/05 MySQL