Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article describes a solution to a page refresh route that does not change, but only reloads the component and does not re-render the page. Methods that use the router include replace and the advanced module navigation guard beforeRouterEnter.

preface

First of all, I will describe the functional background. The new data is in the form of steps. This kind of interaction is relatively common. So, for example, when you add people information, it involves information.

  • Basic information (READ by ID card reader)
  • Business information (according to the ID number to find out the work group, refer to the unit and some manual input information)
  • Face capture (local camera capture)

Step modules are usually developed without changing the route; the first to last step route is always, for example: /add

Problem requirement point description

Here comes the key feature

When a group of data is added and you choose to continue adding, expect the current page to jump to the first step, use this.$router.go(0) or location.reload can solve this problem, but the whole page will reload, resulting in a white screen and a bad waiting time experience.

Add: You may wonder if v-if or V-show switching display components can also be solved, but you need to deal with multiple page clearing operations, and the step operation is not only the next step but also the previous step. The information entered in the previous step is related to the next step, which can be complicated and bug prone to design considerations. So let’s start with routing to find a solution.

Summary of requirements: Reload only components, do not reload the entire page.

The solution

Solution: Use the replace method to go with an intermediate component. It’s the same thing as a to B, b to A. B Is processed at the beforeRouterEnter

b.vue

<template>
  <div></div>
</template>
<script>
// Component -> Refresh -> Component Example: The < Continue to Add > button is added successfully in a step-by-step manner
export default {
  name: 'Refresh'.beforeRouteEnter(to, from, next) {
    next(vm= > {
      vm.$router.replace(from.path)
    })
  }
}
</script>
Copy the code

Some questions

  • Why use replace instead of push?

You can actually use push, which means push will leave a record in the history of the browser, but replace doesn’t, because it’s a middleware that doesn’t need to be shown

  • Is it possible to jump to itself using push or replace without middleware

After testing, push itself or replace itself, the page display still stays on the finished page without going back to the first step.