vue单页面实现路由跳转后保留原页面数据
时间: 2023-05-10 07:01:37 浏览: 143
在 Vue 单页面中,当进行路由跳转时,原本页面的组件会被卸载并销毁,随之而来的是新页面的组件会被实例化并加载,这意味着原先页面的数据也会被清空。但是,在某些场景下,我们需要保留原页面数据,比如在从详情页面返回列表页面时,需要保留列表页面已经加载的数据。
Vue 提供了一种叫做“keep-alive”的内置组件,可以让我们实现路由跳转时保留原页面数据的需求。
keep-alive 组件会将其包含的子组件进行缓存,当再次进入这些子组件时,会直接复用缓存中的内容,并不会重新渲染。因此,我们可以将需要进行数据保留的组件包裹在 keep-alive 组件内,从而实现我们的需求。
具体来说,我们可以在路由配置中针对每个需要进行数据保留的路由进行如下配置:
```javascript
{
path: '/list',
name: 'list',
component: () => import('./views/List.vue'),
meta: {
keepAlive: true // 将该路由设置为需要保留数据
}
}
```
然后在 App.vue 中加入 keep-alive 组件:
```html
<template>
<div id="app">
<keep-alive>
<!-- 监听需要做数据保留的路由 -->
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
</div>
</template>
```
这样做就可以实现在路由跳转后保留原页面数据的需求。当路由配置的 meta 中设置了 keepAlive 为 true 时,该路由对应的组件在切换路由时将不会被卸载,因此组件中保留的数据也不会被清空。
需要注意的是,由于 keep-alive 组件会将其包含的组件进行缓存,可能会对内存造成一定的压力,因此在使用时需要根据实际情况进行考虑。