低级路由
依据传递的参数
申请数据,渲染到页面后刷新后页面空白
排查了很久,总感觉是携带的参数的问题,最初发现是申请的数据没有正确的读取,用计算属性解决了
路由跳转传参
<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; }, }, },
临时解决,待欠缺...