如何避免在Vue中菜单tab切换时的页面刷新-前端问答-PHP中文网

如何避免在Vue中菜单tab切换时的页面刷新

PHPz

发布： 2023-04-26 16:13:26

原创

7260人浏览过

在前端开发中，常常需要实现菜单栏的tab切换功能。而随着单页面应用的流行，越来越多的网页采用了vue框架进行开发，vue框架提供了丰富的组件库和快捷的绑定方式，帮助开发者轻松地实现很多功能。其中，vue的tab切换组件在开发中得到了广泛的应用。

然而，在实现菜单栏的tab切换功能时，经常会遇到一个问题：每次切换tab时，页面都会重新加载，会导致用户的操作被中断。那么，如何避免在Vue中菜单tab切换时的页面刷新呢？本文将介绍一种可行的解决方案。

一、问题分析

在Vue框架中，常见的tab切换方式可以通过v-bind动态绑定class来实现。比如，我们想要实现一个简单的菜单栏，具有三个tab切换，页面内容会随着tab的切换而改变。这时，我们可以这样写：

    <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>

登录后复制

在这个代码中，我们使用了v-bind指令来动态绑定li标签的class属性。其中，activeIndex用于标记当前选中的tab，fetchContent方法用于获取对应tab下的内容。当用户点击tab时，handleClick方法会更新activeIndex，并触发fetchContent方法，由此获取对应tab下的内容。

立即学习“前端免费学习笔记（深入）”；

这样的代码具备一定的功能和可用性，但是每次点击tab都会重新获取内容，这可能会导致用户体验的下降。为了避免这个问题，我们需要使用Vue中提供的keep-alive组件，将内容缓存起来，避免重复获取。

二、keep-alive组件的作用

Vue提供了keep-alive组件，可以实现缓存组件的目的。在使用keep-alive组件时，如果一个组件被包裹在keep-alive组件中，那么当这个组件被销毁时，它的状态会被保留下来，直到下一次被渲染。也就是说，组件不会重新被创建，也不会重新挂载dom。

keep-alive组件具有两个特殊的生命周期钩子：activated和deactivated。当页面中keep-alive组件缓存中的组件被激活时（即该组件在缓存中处于活跃状态，并被重新复用），activated钩子函数会被调用。同理，当缓存的组件被禁用（即处于非激活状态）时，deactivated钩子函数会被调用。

在菜单tab切换的场景中，我们可以将keep-alive组件应用在需要缓存的组件上，并通过“keep-alive”特殊属性来激活缓存。代码如下：

    <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>

登录后复制

我们在代码中加入了keep-alive组件，并将需要保留的组件包裹在其中。在fetchContent方法中，每次更新content前，我们需要将showContent属性设为true，以触发缓存。而当activeIndex属性发生改变后，我们需要将showContent设为false，以防止悬空缓存导致的意外错误。

青柚面试

简单好用的日语面试辅助工具

查看详情

这样，当用户切换tab时，如果该tab的内容已经被缓存，页面不会发生刷新，用户体验也得到了保障。

三、优化

通过对代码进行进一步分析和优化，我们可以实现更好的用户体验和代码可读性。

首先，在菜单项较多的情况下，我们可以通过组件动态生成的方式来避免手写大量的代码。我们可以通过computed属性，对items进行建模，然后在视图中引用该属性，实现自动生成菜单项的效果。例如：

  <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>

登录后复制

通过contentMap对象，我们可以对各个tab对应的内容进行建模。在computed属性中，我们使用a[b]的形式来获取对应的组件。在方法handleTabClick中，更新activeIndex的值即可触发组件的缓存。

接下来，我们可以对缓存的效果进行优化。在组件被缓存后，组件会从内存中读取数据，并复用之前生成的dom。但是，在组件被完全销毁之前，被缓存的组件不接受任何状态更改，包括prop和事件等。如果我们需要在被缓存的组件中修改一些状态，我们可以使用activated和deactivated钩子函数。同时，为了防止输入框中的数据被重置，我们需要使用v-model指令，将数据绑定到真正处理数据的组件上，而非缓存的组件上。例如：

  <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>

登录后复制

在这个例子中，我们设置了一个数据校验函数dataValid，用于检查输入框的数据，dataValid只能在父组件中调用，这是v-model指令的要求。同时，在WUHAN_CONTENT组件中，我们使用watch方法监听输入框的数据变化，通过更新tip实现了数据实时检查的效果。经过这些优化，我们的菜单tab切换功能就可以完美地展现在页面上了。

四、总结

本文介绍了在Vue框架中实现菜单tab切换功能时如何避免刷新的问题，并通过keep-alive组件的应用来实现了页面内容的缓存。同时，我们对程序进行了优化，提高了程序的效率和用户体验。

在Vue开发中，tab切换是常见的功能，在实现过程中，除了本文介绍的方法，还有很多其他的实现方式，如element-ui和iview这两个UI框架的组件库，Vue-router中也提供了相关的API和组件，每种方式都有其特点和优缺点。我们在实际开发中，需要根据实际需求和开发环境的不同，选择最适合的方法来实现菜单tab切换功能。

以上就是如何避免在Vue中菜单tab切换时的页面刷新的详细内容，更多请关注php中文网其它相关文章！