vue-router url传递参数不能正常请求的问题

先在组件内发起的请求，访问进来没有问题，但如果直接在地址栏修改url参数，没有任何反应。用了路由守卫‘beforeRouteEnter’之后能发起请求，但是每次请求的都是上传的参数，不知道什么原因。
通过打印参数发现，没用路由守卫之前路由id参数一直不变，而用了路由守卫虽然路由更新了，但是页面总是少一次。

解决方法：
在vuex中发起异步请求：

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中将数据添加到state中
CONTENT(state, {content}){
    state.content = content
}

组件中

data () {
    return {
        id: this.$route.params.id, // 当前路由id，对应文章的id
    }
},  
computed:{
    // 返回数据
    content(){
        return this.$store.state.content
    },
    // 返回状态码
    contentRes(){
        return this.$store.state.contentRes
    }
}

监听当前路由

watch:{
    // 监听路由变化刷新数据
    '$route.params.id':function(id){
        // 返回路由id
        this.getPost(id)
    }
}

在methods中传入请求的参数，也就是当前路由id

getPost(id){
   this.$store.dispatch('GET_POST', {id: id})
 }

这样有个问题，初始进入的时候没有数据，需要在created给个默认值，就是创建的时候的路由id

created () {
    // 创建时候默认路由id
    this.getPost(this.id)
}

还有一个问题，不是每个对应的路由都有数据，没有数据的通过判断返回的数组长度判断，但是当进入了没有数据的路由再去访问有数据的数据有时候加载有时候不会加载。原因是created创建的时候判断，数据可能还没进来。解决方法也是在vuex中。

帖子.gif