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

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

路由跳转传参

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

临时解决,待欠缺...