微客导航 » 文章资讯 » vue 判断页面是首次进入还是再次刷新的实例

vue 判断页面是首次进入还是再次刷新的实例

2023-07-12 17:23:03 253

我就废话不多说了，大家还是直接看代码吧~

补充知识：VUE-Router同一页面第二次进入不刷新问题以及几个解决方案

最近正好遇到一个问题，修改用户的头像，修改后再进入用户主页，发现改了之后即使数据变了。。页面也不会重新渲染。。。

下面提供集中解决方案来给予大家参考：

1.可以在刷新的页面定义一个参数,这样每次都会渲染出不同的页面：

route实例化命名配置：

{
//用户信息
path:'/accountDetail/:randKey',
name:'accountDetail',
component:accountDetail,
meta:{requiresAuth:true}
},

跳转的地方配置：

varchars=['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'];
varmaxLength=15;
varres='_jsonpphotochange';
for(vari=0;i
2.可以让全局的页面都重载，这个比较狠冗余也多，慎重点用：
在App.vue下修改：


//import{mapState}from'vuex';
exportdefault{
name:'app',
computed:{
key(){
returnthis.$route.name!==undefined?this.$route.name+newDate():this.$route+newDate();
}
}
};

//就是在template下加一对标签加上key的属性，不过官网说如果防止组件的复用就用这个还是比较推荐这个方法的。

3.watch来检测路由变化。。缺点是，有时候会莫名出现点两次的情况，也就是你要跳转会跳转两次。。有人说是进来会执行一次跳转回执行一次，不过我觉得不太像。。希望有能人士指点。。
watch:{
'$route'(to,from){
this.httpGetUserInfo();//这是我ajax获取用户信息的方法
}
}
//这样每次路由执行就会运行这个方法，第一次打开不会运行，你需要用created()方法来执行下ajax方法。
以上这篇vue判断页面是首次进入还是再次刷新的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

vue 判断页面是首次进入还是再次刷新的实例

热门推荐

随机推荐