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