当前位置：首页 > VUE

vue实现页面不刷新

2026-02-20 16:06:16VUE

动态路由与组件复用

在Vue中可以通过动态路由匹配实现页面无刷新跳转。配置路由时使用props: true传递参数，结合watch监听$route变化来更新组件数据。这种方法适合展示不同ID的同类内容，例如商品详情页。

// 路由配置
{
  path: '/detail/:id',
  component: Detail,
  props: true
}

// 组件内
watch: {
  '$route.params.id'(newVal) {
    this.fetchData(newVal)
  }
}

keep-alive缓存组件

使用<keep-alive>包裹路由视图可以缓存非活跃组件实例，避免重复渲染。通过include/exclude属性控制缓存范围，配合路由元信息meta.keepAlive实现精细化控制。

<keep-alive :include="cachedViews">
  <router-view/>
</keep-alive>

// 路由配置示例
{
  path: '/user',
  component: User,
  meta: { keepAlive: true }
}

事件总线通信

对于简单场景，可以通过事件总线实现跨组件通信。创建一个Vue实例作为中央事件总线，使用$emit触发事件，$on监听事件。

vue实现页面不刷新

// eventBus.js
import Vue from 'vue'
export default new Vue()

// 组件A
eventBus.$emit('data-updated', newData)

// 组件B
eventBus.$on('data-updated', this.handleUpdate)

Vuex状态管理

复杂应用建议使用Vuex集中管理状态。通过mutations修改state，actions处理异步操作，组件中使用mapState/mapActions访问数据和方法。

// store.js
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

// 组件内
this.$store.commit('increment')

局部数据更新

对于表单等交互场景，采用v-model双向绑定配合计算属性。使用Object.assign或扩展运算符创建新引用触发响应式更新。

vue实现页面不刷新

data() {
  return { form: { name: '', age: null } }
},
methods: {
  updateForm() {
    this.form = { ...this.form, age: 25 }
  }
}

异步组件加载

结合路由懒加载和webpack代码分割技术，实现按需加载组件。使用动态import语法提升首屏加载速度，后续导航无需刷新页面。

const User = () => import('./views/User.vue')

虚拟滚动优化

处理长列表时采用虚拟滚动技术，只渲染可视区域内的DOM元素。常用库如vue-virtual-scroller可大幅提升性能。

<RecycleScroller
  class="scroller"
  :items="items"
  :item-size="50"
  key-field="id"
  v-slot="{ item }"
>
  <div>{{ item.name }}</div>
</RecycleScroller>