Vue/react single page application back without refresh solution

introduction

Refresh when going forward and not refresh when going back is a feature similar to that of app pages. However, it is not easy to do this in a single-page web application.

Why bother?

The rendering principle of spa (taking vue as an example): the change of url triggers onHashChange/pushState/popState/replaceState, and the pathName in the url is used to match the component defined in the route, load it in, and instantiate it and render it in the project's export router-view.

In other words, parsing and rendering of one instance means destroying another instance, because there is only one rendering exit.

Why doesn't keep-alive work? Because the principle of keep-alive is to store the instantiated components, when the URL matches the changed component next time, it will be taken from the storage first.

However, Vue only provides a way to enter storage, not a way to delete storage, so it is impossible to implement "forward refresh".

One solution is to manually make forward and backward judgments based on to and from. This judgment cannot cope with complex jump logic and has poor maintainability.

Community solutions with pitfalls (taking Vue as an example)

vue-page-stack , vue-navigation .
Both solutions have obvious disadvantages: the former does not support nested routing, and in some scenarios the URL may change and the page may become completely unresponsive; the latter has similar bugs. And both solutions are very invasive because they are based on the magic modification of vue-router. And it will add meaningless extra fields (stackID) to the URL

Good plan at the moment

Now there is a feasible and simple solution: nested sub-routes + stacked pages.
The inspiration for stacking pages: webview in webview in native applications, window in window in multi-page applications.
To achieve back without refresh in SPA, the essence is to achieve coexistence of multiple instances.
The core of this solution is to achieve multi-instance coexistence through nested sub-routes and achieve visual page stacking through CSS absolute.

Effect picture

Implementation in Vue

In the routes configuration file:

import Home from "../views/Home.vue";

const routes = [
  {
    path: "/home",
    name: "Home",
    component: Home,
    children: [
      {
        path: "sub",
        component: () =>
          import(/* webpackChunkName: "sub" */ "../views/Sub.vue"),
      },
    ],
  },
];

export default routes;

Home page:

<template>
  <div class="home">
    <input v-model="inputValue" />
    <h3>{{ inputValue }}</h3>
    <button @click="handleToSub">to sub</button>
    <router-view @reload="handleReload" />
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      inputValue: "",
    };
  },
  methods: {
    handleToSub() {
      // Note that the routing format is based on the sub under the previous route /home, not an independent /sub
      this.$router.push("/home/sub");
    },

    handleReload(val) {
      // Here you can do some operations to re-acquire data, such as modifying data on the details page and re-pulling the list after returning console.log("reload", val);
    },
  },
  mounted() {
    // The subpage returns and the lifecycle will not be rerun console.log("mounted");
  },
};
</script>

<style scoped>
.home {
  position: relative;
}
</style>

Subpages:

<template>
  <div class="sub">
    <h1>This is Sub page</h1>
  </div>
</template>

<script>
export default {
  beforeDestroy() {
    // You can pass custom parameters. If you don't need them, you don't need to do this.$emit("reload", 123);
  },
};
</script>

<style scoped>
.sub {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>

Implementation in react

In routes:

import { Route } from "react-router-dom";

const Routes = () => {
  return (
    <>
      {/* You can't add exact here, because you need to match the parent page first and then the child page*/}
      <Route path="/home" component={lazy(() => import("../views/Home"))} />
    </>
  );
};

export default Routes;

Home page:

import React, { useEffect, useState } from "react";
import { Route, useHistory } from "react-router-dom";
import styled from "styled-components";
import Sub from "./Sub";

const HomeContainer = styled.div`
  position: relative;


const Home: React.FC = () => {
  const [inputValue, setInputValue] = useState("");
  const history = useHistory();

  const handleToSub = () => {
    history.push("/home/sub");
  };

  const handleReload = (val: number) => {
    console.log("reload", val);
  };

  useEffect(() => {
    console.log("mounted");
  }, []);

  return (
    <HomeContainer>
      <input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h3>{inputValue}</h3>
      <button onClick={handleToSub}>to sub</button>
      <Route
        path="/home/sub"
        component={() => <Sub handleReload={handleReload} />}
      />
    </HomeContainer>
  );
};

export default Home;

Subpages:

import React from "react";
import styled from "styled-components";

const SubContainer = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;


type SubProps = {
  handleReload: (val: number) => void;
};

const Sub: React.FC<SubProps> = ({ handleReload }) => {
  useEffect(() => {
   return () => handleReload(123);
  }, []);
  
  return (
    <SubContainer>
      <h1>This is Sub page</h1>
    </SubContainer>
  );
};

export default Sub;

Off topic

In my previous company’s core project “Ping An Good Car Owner”, I used this solution in some new h5 projects, and it withstood the test of more than 1.7 million visits online. This h5 solution is currently being promoted in Shopee. Due to its simple logic, it has been recognized and used by many colleagues. For example, a common example is: there are search conditions on the list page, enter the details page and then return. You can try it, you will be surprised.

Advantages of this program

• Simple implementation, non-intrusive modification, almost zero logic;
• Subpages can be provided separately for third-party access;
• Fully coexisting multiple instances, no refresh when going back;
• Can communicate like parent-child components and listen to child page leaving;

shortcoming

The routing format needs to be modified and must be nested, with certain requirements for the URL.
github address
https://github.com/zhangnan24/no-refresh-back-vue

This is the end of this article about the solution of back-not-refresh for vue/react single-page applications. For more relevant content about back-not-refresh for vue/react, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!