共计 1036 个字符,预计需要花费 3 分钟才能阅读完成。
低级路由
依据传递的 参数
申请数据,渲染到页面后 刷新后页面空白
排查了很久,总感觉是携带的参数的问题,最初发现是申请的数据没有正确的读取,用计算属性解决了
路由跳转传参
<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;},
},
},
临时解决,待欠缺 …
正文完