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

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

路由跳转传参

      <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;},
    },
  },

临时解决，待欠缺 …