单页应用后退不刷新方案(vue & react)

更新日期: 2021-09-27阅读: 2.1k标签: 刷新

引言

前进刷新,后退不刷新,是一个类似app页面的特点,要在单页web应用中做后退不刷新,却并非一件易事。

为什么麻烦

spa的渲染原理(以vue为例):url的更改触发onHashChange/pushState/popState/replaceState,通过url中的pathName去匹配路由中定义的组件,加载进来并实例化渲染在项目的出口router-view中。

换言之,一个实例的解析渲染意味着另外一个实例的销毁,因为渲染出口只有一个。

keep-alive为什么不行?因为keep-alive的原理是将实例化后的组件存储起来,当下次url匹配到了改组件时,优先从存储里面取。

但是vue只提供了入存储的方式,没提供删存储的方式,所以没法实现“前进刷新”。

有一种方案是手动根据to和from去做前进后退判断,这种判断不能应对复杂的跳转逻辑可维护性也很差

有坑的社区方案(以vue为例)

vue-page-stack,vue-navigation。

这两个方案都有明显缺点:前者不支持嵌套路由,在一些场景下会出现url变化,页面完全无反应的情况,后者存在类似的bug。并且这两种方案侵入性都很强,因为他们都是基于vue-router的魔改。并且会在url中增加无意义的多余字段(stackID)


目前不错的方案

现在有一个可行且简单的方案:嵌套子路由 + 叠页面

叠页面的灵感:原生应用中的webview in webview,多页应用中的window in window。

要在spa中实现后退不刷新,本质是要实现多实例共存

这个方案的核心在于:通过嵌套子路由实现多实例共存,通过css的absolute实现视觉上的页面堆叠


vue中的实现

在routes配置文件中:

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;

主页:

<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() {
      // 注意路由格式,是基于上一个路由/home下面的sub,不是独立的/sub
      this.$router.push("/home/sub");
    },

    handleReload(val) {
      // 这里可以做一些重新获取数据的操作,比如在详情页修改数据,返回后重新拉取列表
      console.log("reload", val);
    },
  },
  mounted() {
    // 子页面返回,不会重新跑生命周期
    console.log("mounted");
  },
};
</script>

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

子页面:

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

<script>
export default {
  beforeDestroy() {
    // 可以传自定义参数,如果没需要,也可以不做
    this.$emit("reload", 123);
  },
};
</script>

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


react中的实现

在routes中:

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

const Routes = () => {
  return (
    <>
      {/* 这里不能加exact,因为要先匹配父页面再匹配子页面 */}
      <Route path="/home" component={lazy(() => import("../views/Home"))} />
    </>
  );
};

export default Routes;

主页:

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;

子页面:

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;

题外

在前司的核心项目“平安好车主”中,我就在部分h5新项目用了该方案,在线上经受住了170w+访问量的考验。目前在Shopee也在推行这种h5方案,由于逻辑简单,得到了不少同事的认可和使用。比如常见的:列表页存在搜索条件,进入详情页再返回。 大家可以试用一下,会有惊喜的。

该方案的优点

  • 实现简单,无侵入式修改,几乎0逻辑;
  • 子页面可以单独提供出去,供三方接入;
  • 完全的多实例共存,后退不刷新;
  • 可以像父子组件一样通信,监听子页面离开;

缺点

路由格式需要做改造,必须做成嵌套关系,对url有一定要求。

github地址:https://github.com/zhangnan24/no-refresh-back-vue
原文来自:https://www.cnblogs.com/zhangnan35/archive/2021/09/27/15344231.html


链接: https://www.fly63.com/article/detial/10681

vue页面如何返回不刷新_ vue页面撤退不能返回到顶部的实现

vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?1、使用vuex存储滚动状态,2、使用缓存keepAlive的实现

移动端下拉刷新头实现原理及代码实现

实现下拉刷新主要分为三步:监听原生touchstart事件,记录其初始位置的值,e.touches[0].pageY;监听原生touchmove事件,记录并计算当前滑动的位置值与初始位置值的差值,大于某个临界值时,显示下拉刷新头

vue实现局部刷新

使用2.2.0 新增的provide / inject控制<router-view>的显示隐藏,在App.vue中使用provide,在使用局部刷新的组件中使用inject

浏览器刷新事件的监听和使用

浏览器F5刷新的时候有一个刷新执行之前的事件,beforeunload 事件,这个事件可以提示用户在刷新页面之前有一个提示。下面是beforeunload的用法:

vue强制刷新子组件

把一个组件重置到初始状态是一个常见的需求,推荐的做法有两种:一种是父组件重置子组件的 prop,另一种是子组件暴露一个重置的方法供父组件调用。

解决使用vuex刷新页面state数据消失

在实际的vue项目中,当我们的应用遇到多个组件之间的共享问题时,通常会用到Vuex(一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化),解决组件之间同一状态的共享问题。

Vue 实现前进刷新,后退不刷新的效果

在一个列表页中,第一次进入的时候,请求获取数据。点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷新。

Vue 改变数据,页面不刷新的问题

最近在用 element-ui 开发一个网站,使用 table 组件时,发现修改完数据,有时候会延迟一两秒,页面才会发生变化。看了一下代码,发现修改数据的代码是这样的

Vue刷新当前页面的3种实现

缺点:同 this.$router.go(0) 一样,会白屏。通过 $nextTick(),协助实现。先把 <router-view /> 移除,移除后再重新添加,达到刷新当前页面的功能。是目前最合适的实现方式。

vue项目如何刷新当前页面?

想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种:如果希望点击确定的时候

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!