UI

Página de la lista

Página de detalles

Demanda

Ingrese la página de detalles desde la segunda página de la página de la lista, la página de la lista todavía se muestra en la segunda página al regresar;
Desde la segunda página de la página de la lista hasta la página de detalles, la condición de filtro de la página de la lista todavía existe al regresar.

<! - más ->

Opciones tecnológicas

Utilice vue-routercomponentes, al this.$router.push({path: path, query: query});almacenar la 页码suma 选择条件como un parámetro en la url, este método es factible en el diseño de interfaz de usuario anterior, pero cuando la página de lista contiene el componente de pestaña (el componente de paginación es público), se deberá a factores de inserción (Debido a que push abrirá una nueva página) causó algunos problemas (PD: también puede ser la razón de mi capacidad técnica), no me di cuenta.
El uso History API(HTML5 comienza a admitir), por el history.replaceStatecamino, se 页码almacenará como un parámetro en la URL, se 选择条件almacenará en el historial (no está claro dónde se almacenan específicamente los datos); a través de la location.hashforma de obtener 页码; a través de la history.stateforma de obtener las condiciones de selección de almacenamiento.

Implementación específica-selección de tecnología 2

Interruptor

Agregue un interruptor (ruta abierta) para el componente de paginación, ya que la línea gris debe estar en línea, en caso de que haya un problema, solo se debe ajustar una página. El código es el siguiente:

<script>
  export default {
    props: {
      openroute: {
        type: Boolean,
        default: () => (true)
      }
    },
  }
</script>

Almacenamiento `页码`y `选择条件`recuperación en componente de paginación`页码`

<script>
  export default {
    methods: {
      fetchData(page) {
          //请求参数
        let params = this.params;
        //请求页码
        let newPage;
        //openroute处理
        if (this.openroute) {
          //为url添上#page
          if (page) {
            history.replaceState(params.data, document.title, "#" + page);
          } else {
            if (history.state) {
              if (!history.state.key && location.hash && location.hash.split("#") && location.hash.split("#")[1]) {
                if (JSON.stringify(history.state) !== JSON.stringify(params.data)) { //选择条件变更则请求第一页
                  history.replaceState(params.data, document.title, "#1");
                } else {
                  history.replaceState(params.data, document.title, "#" + location.hash.split("#")[1]);
                }
              } else {
                history.replaceState(params.data, document.title, "#1");
              }
            } else {
              if (location.hash && location.hash.split("#") && location.hash.split("#")[1]) {
                history.replaceState(params.data, document.title, "#" + location.hash.split("#")[1]);
              } else {
                history.replaceState(params.data, document.title, "#1");
              }
            }
          }
          //获取url后面的#page
          if (location.hash && location.hash.split("#") && location.hash.split("#")[1]) {
            newPage = Number(location.hash.split("#")[1]);
          } else {
            newPage = 1;
          }
        } else {
          newPage = page;
        }
        //请求数据，获得结果，传递给列表页面
      }
    }
  }
</script>

Lista de adquisición de páginas`选择条件`

En la actualidad, puede deberse al problema del diseño del marco, y no es Object.assignposible reemplazar la variable inicial mediante la solicitud de datos , así que trátelo primero (método estúpido, ustedes tienen una solución, bajo la guía de problemas, gracias ):

<script>
  export default {
    data() {
      return {
        form: {
          aaa: (history.state && history.state.aaa) ? history.state.aaa : null,
          bbb: (history.state && history.state.bbb) ? history.state.bbb : null,
          ccc: (history.state && history.state.ccc) ? history.state.ccc : null
        },
      };
    }
  };
</script>

Se ha resuelto que la variable inicial no necesita ser movida, y se puede lograr de las siguientes maneras:

created(){
  //获取缓存的数据
  if (history.state) {
    Object.assign(this.form, history.state)
    if (this.form.key) {
      delete this.form.key
    }
  }
},

Aquí hay un registro: pensé que el método creado se ejecutó después de la supervisión del componente de paginación y luego se descubrió que era engañoso (porque la Object.assign(true, this.form, history.state)asignación de datos se logró a través del pasado , pero no tuvo éxito). Aquí hay un pequeño resumen:

¿Cuál es la diferencia entre Object.assign (true, a, b); "y" Object.assign (a, b); "?

Conclusión: El primero: cambiar a no afecta a b; el segundo: cambiar a afecta a b

Análisis (Este artículo tiene análisis de código fuente ( <font color = 'red'> Respuesta: ¿Cómo asociar el código fuente en WebStorm? </ Font> ), genial): https: //www.cnblogs.com/libin ...

Preguntas más frecuentes

La history.replaceStateforma de usarlo es porque: no empujará la url modificada a la pila de historial, por lo que no aumentará el número de pasos de las operaciones de avance y retroceso;
history.replaceStateModo de uso , el tamaño del estado almacenable no puede funcionar 640k;
Puede haber problemas de compatibilidad del navegador, revisa aquí: https: //caniuse.com/#feat=his ... .

Demo o fuente

Debido a que es un proyecto de la compañía, actualmente no hay una demostración o código fuente

Artículo de referencia

Manipulando el historial del navegador

Este artículo se reproduce en: Ape 2048 Vue usa el Historial para registrar los datos de la página anterior

Vue usa el Historial para registrar los datos de la página anterior

UI