这是因为每次路由切换,Vue 会重新渲染组件,导致子组件的状态被重置。如果希望在路由切换时保留子组件的状态,可以使用 Vue 的 keep-alive 组件。keep-alive 可以将组件缓存起来,不会在每次路由切换时重新渲染,从而保留组件的状态。具体使用方法如下:

  1. 在需要缓存的组件外层包裹一个 keep-alive 组件:
<keep-alive>
  <your-component></your-component>
</keep-alive>
  1. 在路由配置中指定需要缓存的组件:
{
  path: '/your-path',
  component: YourComponent,
  meta: {
    keepAlive: true // 需要缓存的组件
  }
}
  1. 在需要缓存的组件中,通过 activated 和 deactivated 钩子函数来控制组件的状态:
export default {
  activated() {
    // 组件被激活,可以在这里重新获取数据等操作
  },
  deactivated() {
    // 组件被停用,可以在这里保存组件状态等操作
  }
}
``
vue在两个页面中使用了同一个菜单子组件在通过菜单跳转的时候每次跳转会初始化我的子组件状态

原文地址: https://www.cveoy.top/t/topic/eo8c 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录