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

jQuery implements form validation function

jQuery form validation example / including userna...

Complete steps to build NFS file sharing storage service in CentOS 7

Preface NFS (Network File System) means network f...

In-depth analysis of HTML table tags and related line break issues

What is a table? Table is an Html table, a carrie...

Docker creates MySQL explanation

1. Download MySQL Image Command: docker pull mysq...

How to use worker_threads to create new threads in nodejs

Introduction As mentioned in the previous article...

How to access MySql through IP address

1. Log in to mysql: mysql -u root -h 127.0.0.1 -p...

How to install binary MySQL on Linux and crack MySQL password

1. Make sure the system has the required libaio s...

Docker implements container port binding local port

Today, I encountered a small problem that after s...

Introduction to HTML basic controls_PowerNode Java Academy

The <input> tag The <input> tag is us...

Problems and solutions for MYSQL5.7.17 connection failure under MAC

The problem that MYSQL5.7.17 cannot connect under...

Detailed explanation of Docker Volume permission management

Volume data volume is an important concept of Doc...

How to quickly modify the table structure of MySQL table

Quickly modify the table structure of a MySQL tab...