Question

我有一篇文章组件：

<template>
      <article class="content">
          <div class="content__inner">
              <h1 v-html="post.title" class="content__title"></h1>
                <div :style="{ backgroundImage: 'url(' + post.image + ')' }" class="content__img"></div>
                <div class="content__meta">
                    <h5>by {{post.author}}</h5>
                    <h5>{{post.date}}</h5>    
                </div>
                <div v-html="post.content" class="content__text"></div>
          </div>
          <app-share></app-share>
          <!--<related :post="{category:post.categories,id:post.id}"></related>-->
  </article>

</template>

<script>
import Share from './Share.vue';
import RelatedPosts from './RelatedPosts.vue';
import axios from 'axios';
export default {
name:'article-gy',
components:{
    appShare:Share,
    related:RelatedPosts
},
  data(){
      return{
        post:{}
      }
  },
  created(){
      console.log('inside created',this.post)
     //this.$on('changeContent', post => {
          //this.post = post
          //document.body.scrollTop = document.documentElement.scrollTop = 0;
          //this.$router.push('/'+this.post.slug)
          //sessionStorage.setItem('currentPost',JSON.stringify(this.post))
      //})
  },
  destroyed(){
      //sessionStorage.removeItem('currentPost')
  },
  beforeRouteEnter(to,from,next){
      if(to.params.post){
        next(vm=>{
            vm.post.id = to.params.post.id
            vm.post.content = to.params.post.content.rendered
            vm.post.image = to.params.post.better_featured_image.source_url
            vm.post.author = to.params.post.post_author
            vm.post.date = to.params.post.date
            vm.post.title = to.params.post.title.rendered
            vm.post.categories = to.params.post.categories
            sessionStorage.setItem('currentPost',JSON.stringify(vm.post)) 
            console.log('inside next',vm.post.id) 
          })
      }
      else{
          axios.get('/posts?slug='+to.path)
          .then(response => response.data[0])
          .then(post =>{
              next(vm =>{
                  vm.post.content = post.content.rendered
                  vm.post.author = post.post_author
                  vm.post.image = post.better_featured_image.source_url
                  vm.post.date = post.date
                  vm.post.title = post.title.rendered
                  vm.post.categories = post.categories
                  vm.post.id = post.id
                  sessionStorage.setItem('currentPost',JSON.stringify(vm.post))
                  console.log('inside next',vm.post.id)
            })
        })
    }  
  }
}
</script>

在beforeRouteEnter挂钩我试图用if else条件设置一些数据，如果第一个条件适用，则表示用户来自属于该网站的另一个页面，此页面传递一些数据通过params对象。

在另一种情况下，我做了另一个请求，以获取与slug相关的正确的帖子数据。

现在看来数据已被提取但未显示在模板中。在创建的钩子中，如果我控制台记录post变量，我实际上看到了数据，但我不知道为什么不显示帖子数据。

奇怪的是：如果我这样做，在创建的钩子中：

console.log(this.post)

我得到了数据，但是，例如，如果我这样做：

console.log(this.post.id)

我没有找到。

这不会发生在接下来的内容中，即使我控制台登录post.id

，我也能获得正确的数据

这怎么可能？

由于

修改

我尝试了另一种解决方案，避免使用beforeRouteUpdate挂钩，只使用created挂钩：

created(){
     //this.$on('changeContent', post => {
          //this.post = post
          //document.body.scrollTop = document.documentElement.scrollTop = 0;
          //this.$router.push('/'+this.post.slug)
          //sessionStorage.setItem('currentPost',JSON.stringify(this.post))
      //})
      if(this.$route.params.post){
          this.post.id = this.$route.params.post.id
            this.post.content = this.$route.params.post.content.rendered
            this.post.image = this.$route.params.post.better_featured_image.source_url
            this.post.author = this.$route.params.post.post_author
            this.post.date = this.$route.params.post.date
            this.post.title = this.$route.params.post.title.rendered
            this.post.categories = this.$route.params.post.categories
      }else{
          //console.log(this.$route.params.slug)//

          axios.get('/posts?slug='+this.$route.params.slug)
            .then(response => response.data[0])
                .then(post=>{
                    this.post.id = post.id
                    this.post.content = post.content.rendered
                    this.post.image = post.better_featured_image.source_url
                    this.post.author =  post.post_author
                    this.post.date = post.date
                    this.post.title = post.title.rendered
                    this.post.categories = post.categories
                    console.log('inside then',this.post)
                })
      }
  },

但不“无论如何”，如果路由将帖子对象放入this.$route.params，则会加载内容，否则内容将通过axios获取但不会显示

无法设置使用beforeRouteEnter hook - vuesj2获取的数据

0 个答案: