Question

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

我如何识别用户确实回来了，然后开始了新的流程？

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

1 /使用路由器滚动行为

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

它确实告诉我用户是否回来。不幸的是，滚动行为是在调用网格的已创建和已安装的挂钩之后运行的。这样，我无处放置代码以恢复状态。

2 /使用url参数

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

Answer 1

历史组成部分

library(dplyr)
library(tidyr)

df %>%
  unite(date, year, month, day, sep = "-", remove = FALSE) %>%
  mutate(date1 = as.integer(factor(date,level = unique(date)))) %>%
  group_by(date) %>%
  mutate(date2 = n_distinct(id)) %>%
  ungroup() %>%
  select(-date)


#    year month   day    id date1 date2
#   <int> <int> <int> <int> <int> <int>
# 1  2011     1     5    31     1     2
# 2  2011     1    14    22     2     2
# 3  2011     2     6    28     3     2
# 4  2011     2    17    41     4     2
# 5  2011     3     9    55     5     1
# 6  2011     1     5    34     1     2
# 7  2011     1    14    25     2     2
# 8  2011     2     6    36     3     2
# 9  2011     2    17    11     4     2
#10  2011     3    12    10     6     1

数据方式

save the information in the browser

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

use statemanagement

// 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 globals

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

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

1 个答案: