关于vue.js:路由刷新数据丢失-vuex数据读取的问题

低级路由依据传递的参数申请数据,渲染到页面后刷新后页面空白

排查了很久,总感觉是携带的参数的问题,最初发现是申请的数据没有正确的读取,用计算属性解决了

路由跳转传参

      <li v-for="nav in leftNav" :key="nav.id">
          <router-link
            class="homeLink"
            active-class="homeActive"
            :to="{ name: nav.tab, params: { tab: nav.tab } }"
            >{{ nav.title }}</router-link
          >
      </li>

路由配置

const homeRouter = {
    path: '/home',
    component: Home,
    meta: { title: "主页" },
    children: [
        {
            name: "all",
            path: "all/:tab",
            component: All
        },
    ]
}

子路由发送申请

子路由

activated() {
    console.log(this);
    this.$store.dispatch("getTopic", this.$route.params.tab);
  },

vuex

import axios from 'axios';
const topicData = {
    actions: {
        getTopic(context, value) {
            axios.get(`https://cnodejs.org/api/v1/topics?tab=${value}`).then(res => {
                context.commit('GETTOPIC', res.data)
                console.log("依据" + value + "申请的数据", context.state)
            }).catch(err => {
                console.log(err.message)
            })
        }
    },
    mutations: {
        GETTOPIC(state, value) {
            state.topic = value.data
        }
    },
    state: {
        topic: []
    },
}
export default topicData

子路由读取申请的数据

起初读取失败的写法

data() {
    return {
      topic: this.$store.state.topicData.topic,
    };
  },

批改后

data() {
    return {
      topicData: this.$store.state.topicData,
    };
  },
computed: {
    topic: {
      get() {
        return this.topicData.topic;
      },
    },
  },

临时解决,待欠缺…

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理