vue判断页面刷新的方法

作为一门流行的前端框架，vue为我们提供了许多方便实用的方法。在开发中，有时会需要判断页面是否刷新，来进行相应的处理。下面就为大家介绍一些vue判断页面刷新的方法。

一、监听路由变化

在vue项目中，我们通常使用vue-router进行路由管理。因此，我们可以通过监听路由变化来判断页面是否刷新。具体的实现方法如下：

1. 在main.js中引入vue-router ```

import VueRouter from 'vue-router' Vue.use(VueRouter) ```

2. 在创建router实例时，添加路由钩子函数beforeEach() ```

const router = new VueRouter({ mode: 'history', routes: [...],

beforeEach(to, from, next) { if (from.path === '/') {

console.log('refresh') } next() } }) ```

上述方法通过判断从哪个路由来的可以判断是否刷新

二、监听页面可见性改变

我们也可以通过监听页面可见性改变来判断页面是否刷新。当页面处于不可见状态时，我们可以认为它已经刷新了。具体实现方法如下：

1. 在创建vue实例时，添加可见性改变的事件监听器 ```

import visibility from 'visibilityjs'

new Vue({ el: '#app', beforeCreate() {

visibility.change(function(e, state) { if (state === 'hidden') { console.log('refresh') }

}) },

template: '', components: { App } }) ```

2. 安装`visibilityjs` npm包 ```

npm install visibilityjs --save ```

三、使用localStorage

我们也可以通过localStorage来判断页面是否刷新。我们可以在页面加载时设置一个标志位，然后在页面重新加载时再次读取这个标志位，如果获取到的值与之前保存的值不同，就说明页面已经刷新了。具体实现方法如下：

1. 在页面加载时设置标志位 ``` created() {

localStorage.setItem('isRefresh', false) }

```

2. 在页面重新加载时，读取标志位并比较 ``` mounted() {

const isRefresh = localStorage.getItem('isRefresh') if (isRefresh !== null && !JSON.parse(isRefresh)) { console.log('refresh') }

localStorage.setItem('isRefresh', true) } ```

以上就是vue判断页面刷新的几种方法。综合来看，监听路由变化的方法最为常用，因为vue本身就提供了路由管理的功能，并且可以非常方便地添加路由钩子函数。而其他两种方法相对会有一些局限性，需要根据具体的场景来选择使用。