vue 导航tab 部分页面数据缓存
时间: 2023-08-10 09:35:06 浏览: 47
如果你希望在 Vue 导航 tab 部分页面中缓存部分数据,可以使用 Vue Router 中的 keep-alive 组件。keep-alive 组件可以将组件缓存起来,避免每次重新渲染组件时都要重新获取数据。具体做法如下:
1. 将需要缓存的组件包裹在 keep-alive 标签中。
2. 在需要缓存的组件中,可以使用 activated 钩子函数来重新获取缓存的数据。
下面是一个示例代码:
```
<template>
<div>
<router-link to="/page1">Page 1</router-link>
<router-link to="/page2">Page 2</router-link>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
name: "App",
mounted() {
console.log("App mounted!");
}
};
</script>
```
在上面的代码中,我们使用了 keep-alive 组件来包裹 router-view,这样路由切换时组件不会被销毁,而是被缓存起来。在需要缓存数据的组件中,我们可以使用 activated 钩子函数来重新获取数据:
```
<template>
<div>
<h1>Page 1</h1>
<p>{{ data }}</p>
</div>
</template>
<script>
export default {
name: "Page1",
data() {
return {
data: ""
};
},
activated() {
// 重新获取数据
this.getData();
},
methods: {
getData() {
// 获取数据的代码
// ...
this.data = "Page 1 Data";
}
}
};
</script>
```
在上面的代码中,我们在 activated 钩子函数中重新获取了数据。这样,在切换回 Page 1 时,就可以直接使用缓存的数据,而不需要重新获取。