溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用vue 如何實現判斷頁面是再次刷新還是首次進入？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
我就廢話不多說了，大家還是直接看代碼吧~
<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 如何實現判斷頁面是再次刷新還是首次進入問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
