vue中的页面刷新问题

Posted 2023-03-20

参考技术A

1. 用vue-router重新路由到当前页面，页面是不进行刷新的

2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验感贼不好

3.provide / inject 组合

作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

App.vue:
声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载

4.provide / inject 用法
provide：选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。
inject：一个字符串数组，或一个对象，对象的 key 是本地的绑定名
提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

vue：vue页面刷新vuex数据消失问题

vuex中数据刷新页面消失问题：
a页面请求的数据保存在vuex中，只要不刷新，那跳转到b页面里也可以用，但如果b页面刷新，那vuex里的数据就会消失，
可以得解决方法：a页面用的数据a页面的生命周期函数里请求，b页面用的数据b页面的生命周期函数里请求

你需要知道JavaScript代码是运行在内存中的，代码运行时的所有变量，函数，也都是保存在内存中的。
刷新页面，以前申请的内存被释放，重新加载脚本代码，变量重新赋值，所以这些数据要想储存就必须储存在外部，例如：Local Storage, Session Storage, IndexDB等。
这些是浏览器提供的API，让你可以将数据储存在硬盘上，做持久化储存。具体选择哪一个就根据你实际的需求来决定。
const ls = window.localStorage
// https://github.com/tsironis/lockr
export default {
getItem(key) {
try {
return JSON.parse(ls.getItem(key))
} catch (err) {
return null
}
},
setItem(key, val) {
ls.setItem(key, JSON.stringify(val))
},
clear() {
ls.clear()
},
keys() {
return ls.keys()
},
removeItem(key) {
ls.removeItem(key)
}
}