我有一个网格组件,我在我的应用程序中的许多路线中使用。我想保持其状态(即分页,搜索参数)并在用户返回网格时恢复它(即从编辑一行)。另一方面,当用户启动新流程(即通过单击链接)时,页面被设置为零,并且使用默认参数调用Web服务。
如何识别用户确实回来而不是开始新的流程?
当我研究这个问题时,我遇到了以下解决方案。不幸的是,他们没有为我服务
1 /使用路由器滚动行为
scrollBehavior(to, from, savedPosition) {
to.meta.comeBack = savedPosition !== null;
}
它确实告诉我用户是否回来了。不幸的是,滚动行为在网格创建和挂载挂钩被调用之后运行。这样我就没有地方可以放置我的代码来恢复状态。
2 /使用url param
网格的路线将有一个可选的参数。当param为null时,代码将知道它是一个新流并使用$ router.replace例程设置一个新流。然后用户将进行编辑,返回并且代码将知道他们回来,因为路由param!= null。问题是调用$ router.replace重新创建组件(即调用挂钩等)。此外,可选参数混合并将vue-router与路由中的其他可选参数混淆。
历史组成部分
// component ...
// can error and only serves the purpose of an idea
data() {
return {
history: []
}
},
watch: {
fullRoute: function(){
this.history.push(this.fullRoute);
this.$emit('visited', this.visited);
}
},
computed: {
fullRoute: function(){
return this.$route.fullPath
},
visited: function() {
return this.history.slice(-1).includes(this.fullRoute)
}
}
数据方式
save the information in the browser
// component ...
// can error and only serves the purpose of an idea
computed: {
gridData: {
get: function() {
return JSON.parse(local.storage.gridData)
},
set: function(dataObj){
local.storage.gridData = JSON.stringify(dataObj)
}
}
}
//...
// component ...
// can error and only serves the purpose of an idea
computed: {
gridData: {
get: function() {
return this.$store.state.gridData || {}
},
set: function(dataObj){
this.$store.dispatch("saveGrid", gridData)
}
}
}
//...
// component ...
// can error and only serves the purpose of an idea
computed: {
gridData: {
get: function() {
return window.gridData || {}
},
set: function(dataObj){
window.gridData = dataObj
}
}
}