Vue implements partial refresh of the page (router-view page refresh)

Vue implements partial refresh of the page (router-view page refresh)

Using provide+inject combination in Vue

First you need to modify App.vue.

<template>
  <!-- Company Management -->
  <div class="companyManage">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: "companyManage",
  watch: {},
  provide() {
    return {
      reload:this.reload
    }
  },
  data() {
    return {
      isRouterAlive:true
    };
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick( () => {
        this.isRouterAlive = true;
      })
    }
  },
  mounted() {}
};
</script>

<style scoped>
.companyManage {
  width: 100%;
  height: 100%;
  position: relative;
  background: #fff;
}
</style>

insert image description here

2. Go to the page that needs to be refreshed to reference it, use inject to import the reference reload, and then call it directly.

insert image description here

inject:["reload"],
this.reload();

insert image description here

This is the end of this article about Vue's partial page refresh (router-view page refresh). For more relevant Vue page partial refresh content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Example of implementing partial refresh in Vue

<<:  Exploring the use of percentage values ​​in the background-position property

>>:  Tutorial on installing nginx in Linux environment

Recommend

Drop-down menu implemented by HTML+CSS3+JS

Achieve results html <div class="containe...

Explanation of Truncate Table usage

TRUNCATE TABLE Deletes all rows in a table withou...

How to Enable or Disable Linux Services Using chkconfig and systemctl Commands

This is an important (and wonderful) topic for Li...

Tutorial diagram of installing centos7.3 on vmware virtual machine

VMware Preparation CentOS preparation, here is Ce...

How to use mysqldump for full and point-in-time backups

Mysqldump is used for logical backup in MySQL. Al...

Detailed installation steps for MySQL 8.0.11

This article shares the installation steps of MyS...

Remote development with VSCode and SSH

0. Why do we need remote development? When develo...

Detailed discussion of memory and variable storage in JS

Table of contents Preface JS Magic Number Storing...

Detailed explanation of MySQL combined query

Using UNION Most SQL queries consist of a single ...

How to represent various MOUSE shapes

<a href="http://" style="cursor...

Detailed explanation of Vuex environment

Table of contents Build Vuex environment Summariz...

Historical Linux image processing and repair solutions

The ECS cloud server created by the historical Li...

How to manually upgrade the kernel in deepin linux

deepin and Ubuntu are both distributions based on...