这是因为每次跳转时,路由会重新加载对应的组件,从而重新渲染组件并初始化状态。为了避免这种情况,你可以使用Vue的keep-alive组件来缓存组件状态,从而避免重复初始化。具体做法是在路由配置中使用标签将需要缓存的组件包裹起来,例如:

const routes = [
  {
    path: '/page1',
    component: Page1,
    meta: { keepAlive: true } // 设置需要缓存的组件
  },
  {
    path: '/page2',
    component: Page2,
    meta: { keepAlive: true } // 设置需要缓存的组件
  }
]

然后在你的菜单组件中,使用标签进行页面跳转,例如:

<router-link to="/page1">Page1</router-link>
<router-link to="/page2">Page2</router-link>

这样就可以在页面跳转时保持组件状态不变了

vue在两个页面中使用了同一个菜单组件在通过菜单跳转的时候每次跳转会初始化我的组件状态

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

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