先在組件內(nèi)發(fā)起的請(qǐng)求转锈，訪問(wèn)進(jìn)來(lái)沒有問(wèn)題，但如果直接在地址欄修改url參數(shù)，沒有任何反應(yīng)稀轨。用了路由守衛(wèi)‘beforeRouteEnter’之后能發(fā)起請(qǐng)求，但是每次請(qǐng)求的都是上傳的參數(shù)岸军，不知道什么原因奋刽。
通過(guò)打印參數(shù)發(fā)現(xiàn)瓦侮，沒用路由守衛(wèi)之前路由id參數(shù)一直不變，而用了路由守衛(wèi)雖然路由更新了佣谐，但是頁(yè)面總是少一次肚吏。
解決方法：
在vuex中發(fā)起異步請(qǐng)求：
GET_POST:({state, commit},{id}) => {
let params = {
'id': id
}
axios.get('/api/v1.0/post/post', {params},{
}).then(response =>{
if(response.data.errno === '0'){
commit('CONTENT',{content:response.data.data.post})
commit('CONTENT_RES', {contentRes: false})
}else{
commit('CONTENT_RES', {contentRes: true})
}
})
}
// mutations中將數(shù)據(jù)添加到state中
CONTENT(state, {content}){
state.content = content
}
組件中
data () {
return {
id: this.$route.params.id, // 當(dāng)前路由id，對(duì)應(yīng)文章的id
}
},
computed:{
// 返回?cái)?shù)據(jù)
content(){
return this.$store.state.content
},
// 返回狀態(tài)碼
contentRes(){
return this.$store.state.contentRes
}
}
監(jiān)聽當(dāng)前路由
watch:{
// 監(jiān)聽路由變化刷新數(shù)據(jù)
'$route.params.id':function(id){
// 返回路由id
this.getPost(id)
}
}
在methods中傳入請(qǐng)求的參數(shù)狭魂，也就是當(dāng)前路由id
getPost(id){
this.$store.dispatch('GET_POST', {id: id})
}
這樣有個(gè)問(wèn)題罚攀，初始進(jìn)入的時(shí)候沒有數(shù)據(jù)，需要在created給個(gè)默認(rèn)值雌澄，就是創(chuàng)建的時(shí)候的路由id
created () {
// 創(chuàng)建時(shí)候默認(rèn)路由id
this.getPost(this.id)
}
還有一個(gè)問(wèn)題斋泄，不是每個(gè)對(duì)應(yīng)的路由都有數(shù)據(jù)，沒有數(shù)據(jù)的通過(guò)判斷返回的數(shù)組長(zhǎng)度判斷镐牺，但是當(dāng)進(jìn)入了沒有數(shù)據(jù)的路由再去訪問(wèn)有數(shù)據(jù)的數(shù)據(jù)有時(shí)候加載有時(shí)候不會(huì)加載炫掐。原因是created創(chuàng)建的時(shí)候判斷，數(shù)據(jù)可能還沒進(jìn)來(lái)睬涧。解決方法也是在vuex中募胃。
帖子.gif
