通过vuex传参 跳转过去页面上没有数据 需要刷新 参数才能传过来是为什么
时间: 2023-11-27 12:50:03 浏览: 28
这个问题可能是由于异步加载组件导致的。当你通过 Vuex 传递参数时,如果你的组件是异步加载的,那么组件可能还没有准备好去接收传递过来的参数,从而导致页面上没有数据。
解决方法有两种:
1. 使用 `v-if` 在组件准备好之前隐藏组件,等组件完全加载后再显示。例如:
```html
<template>
<div v-if="isReady">
<!-- 显示组件内容 -->
</div>
</template>
<script>
export default {
data() {
return {
isReady: false
}
},
mounted() {
// 组件加载完成后,将 isReady 设置为 true
this.isReady = true
}
}
</script>
```
2. 在组件的 `created` 钩子函数中使用 `this.$nextTick()` 方法,等待 DOM 更新完成后再进行数据的赋值。例如:
```html
<template>
<div>
<!-- 显示组件内容 -->
</div>
</template>
<script>
export default {
created() {
this.$nextTick(() => {
// 等待 DOM 更新完成后再进行数据的赋值
// 例如:this.data = this.$store.state.data
})
}
}
</script>
```
以上两种方法都可以解决异步加载组件时传递参数导致页面上没有数据的问题。