vue跳转下一级前保留当前页面数据 返回后

Vue提供了许多选项和方法来保存和操作当前页面数据，以实现在跳转到下一个页面后仍能返回当前页面并保留数据的需求。其中，可以使用Vue路由中的导航守卫来处理这种情况。

导航守卫分为全局导航守卫和局部导航守卫。比较适合处理当前问题的是前者，可以在全局导航守卫中定义保存当前页面数据的方法，并在路由跳转时确保数据得到正确保存。

具体实现方式可以分为以下步骤：

1. 在Vue路由文件中定义全局导航守卫beforeEach和afterEach

router.beforeEach((to, from, next) => {
  saveData(from);
  next();
})

router.afterEach((to, from) => {
  loadData(to);
})

其中，beforeEach方法在路由跳转前执行，利用saveData方法将当前页面数据保存下来；afterEach方法在路由跳转后执行，利用loadData方法将保存的数据加载回当前页面。

2. 编写保存和加载数据的方法，在本例中选择使用localStorage存储数据。

function saveData(from) {
  localStorage.setItem('pageData', JSON.stringify(from));
}

function loadData(to) {
  let data = localStorage.getItem('pageData');
  if(data) {
    data = JSON.parse(data);
    if(to.name === data.name) {
      to.params = data.params;
    } else {
      localStorage.removeItem('pageData');
    }
  }
}

其中，saveData方法将from对象序列化成JSON字符串存储在localStorage中；loadData方法则从localStorage中读取数据，并在to对象的params属性中存储。同时，需要注意的是只有当目标路由和源路由是同一个时才会加载数据，否则需要清除localStorage中的数据避免后续操作的干扰。

通过以上操作，即可在Vue项目中实现跳转下一级前保留当前页面数据，返回后能够正确加载的功能。