vue is an instance of determining whether the page is first entered or refreshed again
- 2021-09-12 00:17:15
- OfStack
I won't talk too much, let's just look at the code ~
<template>
<div>
Determine whether the page is entered for the first time or refreshed again
</div>
</template>
<script>
export default {
data(){
return{
}
},
mounted () {
// No. 1 1 Methods
// if(window.name == ""){
// console.log(" Loaded for the first time ");
// window.name = "isReload"; // When we first enter the page, we can give window.name Settings 1 Fixed value
// }else if(window.name == "isReload"){
// console.log(" Page is refreshed ");
// }
// No. 1 2 Methods
if (window.performance.navigation.type == 1) {
console.log(" Page is refreshed ")
}else{
console.log(" Loaded for the first time ")
}
},
methods: {
},
}
</script>
<style scoped>
</style>
Supplementary knowledge: VUE-Router is the same as page 1 for the second time and does not refresh the problem and several solutions
Recently, I just encountered a problem. I modified the user's avatar and then entered the user's homepage. I found that even if the data changed after the change. . The page will not be rendered again. . .
The following centralized solutions are provided for your reference:
1. You can define a parameter in the refreshed page, so that different pages will be rendered every time:
route Instantiation Naming Configuration:
{
// User information
path: '/accountDetail/:randKey',
name: 'accountDetail',
component: accountDetail,
meta: {requiresAuth: true}
},
Jump location configuration:
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 Is a random string , Here are the jumps:
this.$router.push('/accountDetail/' + paramsAccount);
2. You can make the global pages overloaded. This is more ruthless and redundant. Use it carefully:
Modified under 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>
// Is in template Downward addition 1 To label <transition></transition> Plus key The attribute, but official website said Use this to prevent reuse of components This method is recommended.
3. watch to detect route changes. . The disadvantage is that sometimes it happens inexplicably twice, that is, you have to jump twice. . Some people say that when you come in, you will perform a jump and go back to perform a jump, but I don't think it is very similar. . I hope someone can give me some advice. .
watch: {
'$route' (to, from) {
this.httpGetUserInfo(); // This is me ajax Method of obtaining user information
}
}
// In this way, this method will be run every time the route is executed, 1 It won't run after opening it again, you need to use created() Method to execute the following ajax Method.