如何检测用户返回页面而不是开始浏览它?

问题描述 投票:0回答:1

我有一个网格组件,我在我的应用程序中的许多路线中使用。我想保持其状态(即分页,搜索参数)并在用户返回网格时恢复它(即从编辑一行)。另一方面,当用户启动新流程(即通过单击链接)时,页面被设置为零,并且使用默认参数调用Web服务。

如何识别用户确实回来而不是开始新的流程?

当我研究这个问题时,我遇到了以下解决方案。不幸的是,他们没有为我服务

1 /使用路由器滚动行为

scrollBehavior(to, from, savedPosition) {
to.meta.comeBack = savedPosition !== null;
}

它确实告诉我用户是否回来了。不幸的是,滚动行为在网格创建和挂载挂钩被调用之后运行。这样我就没有地方可以放置我的代码来恢复状态。

2 /使用url param

网格的路线将有一个可选的参数。当param为null时,代码将知道它是一个新流并使用$ router.replace例程设置一个新流。然后用户将进行编辑,返回并且代码将知道他们回来,因为路由param!= null。问题是调用$ router.replace重新创建组件(即调用挂钩等)。此外,可选参数混合并将vue-router与路由中的其他可选参数混淆。

vue.js
1个回答
0
投票

历史组成部分

// 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)
   }
 }
}
//...

use statemanagement

// 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)
   }
 }
}
//...

use globals

// component ...
// can error and only serves the purpose of an idea
computed: {
 gridData: {
   get: function() {
     return window.gridData || {} 
   },
   set: function(dataObj){
     window.gridData = dataObj
   }
 }
}
© www.soinside.com 2019 - 2024. All rights reserved.