preface

More and more front-end projects use the MVVM framework vue. js for architecture development, making full use of vue. js’s data-driven, two-way data binding, componentized development and its excellent community ecology (official website + third-party extension support) and other capabilities. In terms of improving performance, vue.js focuses on using component reuse capability, which greatly optimizes the speed of DOM update and improves user experience.

Vue-router is the gold companion of Vue. It is used to set up and manage routes. It has excellent hook functions and simple and rough configuration, which makes it always popular.

Life always needs a twist, some surprises are not….

Vue-router also presents some problems when configuring routes:

  1. When you re-enter the current route, the page is not refreshed
  2. When performing list-like data operations: Adding, deleting, and editing may require refreshing the current page

Here follow Brother Hu’s coquetwork to explore the way to refresh the current route (page)

Method 1: brute force – force the entire page to refresh

  1. Use the this.$router.go(0) function to force a refresh of the current page
  2. Use window.location.href or window.location.reload() to force a refresh of the current page

Problem: In both cases, the current page is refreshed and the browser is reloaded, causing the page to blink and blank, which greatly reduces the user experience.

Method 2: Perfect elegance – with vUE options/combinationsprovide/inject

This pair of options should be used together to allow an ancestor component to inject a dependency into all its descendants, regardless of component level, as long as the upstream and downstream relationship is established

// app.vue component <template> <router-view v-if="isShow" /> </template> <sciprt> export default () {name: 'App', data () {return {// control router-view hide and display isShow: true}}, // provide injectable subcomponent properties provide () {return {reload: This.reload}}, // {reload () {// hide this.isshow = false // $nextTick() defer the callback until the next DOM update loop executes this.$nextTick(() => {this.isshow = true })}} </script> // navbar. vue <template> <div class="nav-bar"> <router-link :to="{name: </router-link> <router-link :to="{name: @click.native="showRouter"> Native ="showRouter"> home </router-link> </div> </template> <script> export default {name: ShowRouter () {// Call the reload method, refresh the whole page this.reload()}}} </script>Copy the code

Afterword.

The above is hu Ge to share the content of today, like partners remember to collect, forward, click in look yo, welcome to more messages exchange…

Brother Hu has words, a technology, feelings of brother Hu! Jingdong open platform chief front-end siege lion. Talk with you about the big front end, share front-end system architecture, framework implementation principles, the latest and most efficient technology practice!

Long press scan code attention, more handsome more beautiful yo!