How to avoid page refresh when menu tab switching in Vue

In front-end development, it is often necessary to implement the tab switching function of the menu bar. With the popularity of single-page applications, more and more web pages are developed using the Vue framework. The Vue framework provides a rich component library and fast binding methods to help developers easily implement many functions. Among them, Vue's tab switching component has been widely used in development.

However, when implementing the tab switching function of the menu bar, a problem is often encountered: every time the tab is switched, the page will be reloaded, causing the user's operation to be interrupted. So, how to avoid page refresh when switching menu tabs in Vue? This article will introduce a possible solution.

1. Problem Analysis

In the Vue framework, common tab switching methods can be implemented through v-bind dynamically binding classes. For example, we want to implement a simple menu bar with three tab switches, and the page content will change as the tab switches. At this time, we can write like this:

    <div id="app">
        <ul>
            <li v-for="(item, index) in items" :class="{ active: index === activeIndex }" @click="handleClick(index)">{{ item }}</li>
        </ul>
        <div>{{ content }}</div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                activeIndex: 0,
                content: '',
                items: ['Tab1', 'Tab2', 'Tab3']
            },
            methods: {
                handleClick(index) {
                    this.activeIndex = index
                    this.fetchContent()
                },
                fetchContent() {
                    // 模拟异步请求
                    setTimeout(() => {
                        this.content = `Tab${this.activeIndex + 1} content`
                    }, 1000)
                }
            }
        })
    </script>

In this code, we use the v-bind directive to dynamically bind the class attribute of the li tag. Among them, activeIndex is used to mark the currently selected tab, and the fetchContent method is used to obtain the content under the corresponding tab. When the user clicks a tab, the handleClick method updates activeIndex and triggers the fetchContent method to obtain the content under the corresponding tab.

Such code has certain functions and usability, but the content will be re-obtained every time the tab is clicked, which may lead to a decrease in user experience. In order to avoid this problem, we need to use the keep-alive component provided in Vue to cache the content and avoid repeated acquisition.

2. The role of the keep-alive component

Vue provides the keep-alive component, which can achieve the purpose of caching components. When using keep-alive components, if a component is wrapped in a keep-alive component, then when the component is destroyed, its state will be retained until the next time it is rendered. In other words, the component will not be recreated, nor will the dom be remounted.

keep-alive component has two special life cycle hooks: activated and deactivated. When a component in the keep-alive component cache in the page is activated (that is, the component is active in the cache and is reused), the activated hook function will be called. Similarly, when the cached component is disabled (ie in an inactive state), the deactivated hook function will be called.

In the menu tab switching scenario, we can apply the keep-alive component to the component that needs to be cached, and activate the cache through the "keep-alive" special attribute. The code is as follows:

    <div id="app">
        <ul>
            <li v-for="(item, index) in items" :class="{ active: index === activeIndex }" @click="handleClick(index)">{{ item }}</li>
        </ul>
        <keep-alive>
            <div v-if="showContent">{{ content }}</div>
        </keep-alive>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                activeIndex: 0,
                content: '',
                items: ['Tab1', 'Tab2', 'Tab3'],
                showContent: false
            },
            methods: {
                handleClick(index) {
                    this.activeIndex = index
                    this.showContent = true
                    this.fetchContent()
                },
                fetchContent() {
                    // 模拟异步请求
                    setTimeout(() => {
                        this.content = `Tab${this.activeIndex + 1} content`
                    }, 1000)
                }
            },
            watch: {
                activeIndex() {
                    this.showContent = false
                }
            }
        })
    </script>

We added the keep-alive component to the code and wrapped the components that need to be retained in it. In the fetchContent method, before each content update, we need to set the showContent attribute to true to trigger caching. When the activeIndex attribute changes, we need to set showContent to false to prevent unexpected errors caused by dangling cache.

In this way, when the user switches tabs, if the content of the tab has been cached, the page will not be refreshed, and the user experience is guaranteed.

3. Optimization

By further analyzing and optimizing the code, we can achieve better user experience and code readability.

First of all, when there are many menu items, we can avoid writing a lot of code by dynamically generating components. We can model items through the computed attribute, and then reference this attribute in the view to achieve the effect of automatically generating menu items. For example:

  <div id="app">
      <ul>
          <li v-for="(item, index) in tabList" :class="{active: index === activeIndex}" @click="handleTabClick(index)">{{item}}</li>
      </ul>
      <keep-alive>
          <component :is="contentComponent"></component>
      </keep-alive>
  </div>
  <script>
      new Vue({
          el: '#app',
         data: {
              activeIndex: 0,
              tabList: ['武汉', '北京', '上海'],
              contentMap: {
                  武汉: {template: '<div>武汉是我的家乡</div>'},
                  北京: {template: '<div>北京欢迎您</div>'},
                  上海: {template: '<div>上海滩最美</div>'}
              }
          },
          computed: {
              contentComponent() {
                  return this.contentMap[this.tabList[this.activeIndex]]
              }
          },
          methods: {
              handleTabClick(index) {
                  this.activeIndex = index
              }
          }
      })
  </script>

Through the contentMap object, we can model the content corresponding to each tab. In the computed attribute, we use the form a[b] to get the corresponding component. In the method handleTabClick, updating the value of activeIndex triggers the component's cache.

Next, we can optimize the cache effect. After the component is cached, the component reads data from memory and reuses the previously generated DOM. However, cached components do not accept any state changes, including props and events, until the component is completely destroyed. If we need to modify some state in the cached component, we can use activated and deactivated hook functions. At the same time, in order to prevent the data in the input box from being reset, we need to use the v-model directive to bind the data to the component that actually processes the data instead of the cached component. For example:

  <div id="app">
      <ul>
          <li v-for="(item, index) in tabList" :class="{active: index === activeIndex}" @click="handleTabClick(index)">{{item}}</li>
      </ul>
      <keep-alive>
          <component :is="contentComponent" v-model="dataValid"></component>
      </keep-alive>
  </div>
  <script>
      const WUHAN_CONTENT = {
          template: `
              <div>
                  <input v-model="data">
                  <button @click="checkData">检查数据</button>
                  <p>{{tip}}</p>
              </div>
          `,
          data() {
              return {
                  data: '',
                  tip: ''
              }
          },
          watch: {
              data() {
                  this.tip = ''
              }
          },
          methods: {
              checkData() {
                  this.tip = this.dataValid(this.data) ? '数据有效' : '数据无效'
              }
          },
      }
      const BEIJING_CONTENT = {template: '<div>北京欢迎您</div>'}
      const SHANGHAI_CONTENT = {template: '<div>上海滩最美</div>'}

      new Vue({
          el: '#app',
          data: {
              activeIndex: 0,
              tabList: ['武汉', '北京', '上海'],
              contentMap: {
                  武汉: WUHAN_CONTENT,
                  北京: BEIJING_CONTENT,
                  上海: SHANGHAI_CONTENT
              },
              dataValid(value) {
                  return value.trim().length > 0
              }
          },
          computed: {
              contentComponent() {
                  return this.contentMap[this.tabList[this.activeIndex]]
              }
          },
          methods: {
              handleTabClick(index) {
                  this.activeIndex = index
              }
          }
      })
   </script>

In this example, we set up a data validation function dataValid to check the data of the input box. dataValid can only be called in the parent component, which is a requirement of the v-model directive. At the same time, in the WUHAN_CONTENT component, we use the watch method to monitor data changes in the input box, and achieve the effect of real-time data checking by updating the tip. After these optimizations, our menu tab switching function can be perfectly displayed on the page.

4. Summary

This article introduces how to avoid refresh problems when implementing the menu tab switching function in the Vue framework, and implements caching of page content through the application of keep-alive components. At the same time, we have optimized the program to improve its efficiency and user experience.

In Vue development, tab switching is a common function. In the implementation process, in addition to the methods introduced in this article, there are many other implementation methods, such as element-ui and iview, the component libraries of the two UI frameworks. Vue Related APIs and components are also provided in -router. Each method has its own characteristics, advantages and disadvantages. In actual development, we need to choose the most suitable method to implement the menu tab switching function based on actual needs and development environments.

The above is the detailed content of How to avoid page refresh when menu tab switching in Vue. For more information, please follow other related articles on the PHP Chinese website!