Блог

Внизу страницы моих сообщений есть раздел связанного содержимого, в котором отображаются другие связанные сообщения.

При нажатии на соответствующий контент я надеюсь, что маршрутизатор обновит страницу. Однако этого не происходит. URL-адрес меняется, но представление не обновляется.

Компоненты

Post.Vue

 <template>
  <div class="post-container" >
    <router-view name="PostContent">
      <h2>test</h2>
    </router-view>
    <div v-if="currentPost !== ''">
      <img :src="currentPost.jetpack_featured_media_url" />
      <!-- <h1 v-html="currentPost.title.rendered"></h1> -->
      <div
        v-html="currentPost.excerpt.rendered"
        class="post-excerpt-container"
      ></div>
      <div
        v-html="currentPost.content.rendered"
        class="post-content-container"
      ></div>
    </div>
    <section class="related-content">
       <h2>Related Content:</h2>
       <p v-if="currentPost.title !== undefined">If you enjoyed {{currentPost.title.rendered}}, we think you'll like:</p>
      <div class="related-content-container" v-for="relatedPost in relatedPosts" :key="relatedPost.id" :data-id="relatedPost.id">
          <router-link :to="{name:'Post',params:{id:relatedPost.id}}">
          <RelatedCard :post='relatedPost' />
          </router-link>
      </div>
    </section>
  </div>
</template>

<script>
import { mapState } from "vuex";
import RelatedCard from '@/components/RelatedCard.vue';
export default {
  name:"Post",
  components:{RelatedCard},
  data() {
    return {
      currentPost: "",
      id: this.$route.params.id,
      relatedPosts: []
    };
  },
  computed: {
    ...mapState({
      baseAPIURL: (state) => state.baseAPIURL,
      posts: (state) => state.posts,
    }),
  },
  created() {
    console.log('created')
    fetch(`${this.baseAPIURL}/posts/${this.id}?_embed`)
      .then((resp) => resp.json())
      .then((post) => {
        this.currentPost = post;
      });
  },
  methods: {
    pushToRelated() {      
      this.posts.forEach((post) => {
        post.relatedScore = 0;
        if (post.id !== this.currentPost.id) {
          post._embedded['wp:term'][0].forEach(el=>{
            for(let i  = 0;i < this.currentPost._embedded['wp:term'][0].length;i  ){
              if (el.name === this.currentPost._embedded['wp:term'][0][i].name){
                post.relatedScore = post.relatedScore   3
              }
            }
          })
          post._embedded['wp:term'][1].forEach(el=>{
            for(let i  = 0;i < this.currentPost._embedded['wp:term'][1].length;i  ){
              if (el.name === this.currentPost._embedded['wp:term'][1][i].name){
                post.relatedScore = post.relatedScore   1
              }
            }
          })
        }
      });
      this.relatedPosts = this.posts.sort((a,b)=>a.relatedScore - b.relatedScore).reverse().slice(0,5)
    }
  },
  watch: {
   currentPost: function () {
     if (this.posts.length > 0){
      this.pushToRelated();
     }
    },
  }
};
</script>

 

RelatedCard.vue

 <template>
    <div class="related-card">
      <div>
        <img v-if="post._embedded['wp:featuredmedia'][0].media_details.sizes.medium_large !== undefined" :src="postImageML" alt="" />
        <img v-else :src="postImage" alt="">
      </div>
      <div>
        <h2 v-html="post.title.rendered"></h2>
        <p v-html="post.excerpt.rendered"></p>
      </div>
    </div>
</template>

<script>
export default {
  props: {
    post: Object,
  },
  computed:{
    postImageML(){
      return this.post._embedded['wp:featuredmedia'][0].media_details.sizes.medium_large.source_url
    },
    postImage(){
      return this.post._embedded['wp:featuredmedia'][0].media_details.sizes.full.source_url
    }
  },
};
</script>

 

Моя конфигурация маршрутизатора

 const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/list",
    name: "List",
    component: List,
  },
  { path: "/database", name: "Database", component: Database },
  {path:"/post/:id",name:"Post",component:Post}
];

const router = new VueRouter({
  routes,
});

export default router;

 

Что я пробовал:

Я пробовал использовать $router.go(). Это сработало при обновлении страницы. Однако после повторного отображения мои наблюдатели не работали должным образом. Кроме того, я терял возможность для пользователя вернуться к предыдущему сообщению.

Я также пытался использовать ключи компонентов для элемента-оболочки, но мне не повезло.

Любые указания на то, почему это происходит, и что я могу сделать, чтобы это исправить, было бы здорово.

Когда вы вводите маршрут, компонент которого в данный момент отображается, по умолчанию компонент используется повторно и по этой причине created не вызывается. Вы могли бы:

Используйте :key

Использование ключа означает, что компонент не будет использоваться повторно, если ключ не совпадает. Измените представление маршрутизатора на:

 <router-view :key="$route.fullPath" />
 

Каждый отдельный параметр изменит полный путь к маршрутизатору и предоставит уникальный ключ.

Используйте updated перехват

В отличие created от этого, это вызывается при изменении параметра. Но он не вызывается при первой загрузке created , поэтому вам нужно будет использовать оба перехвата.

 created() {
  // Do whatever when the component loads
},
updated() {
  // Do whatever when the component updates
}
 

я не прочитал весь ваш код, но попробуйте добавить режим истории к маршрутизатору.

 const router = new VueRouter({
  routes,
  mode: 'history', // Add this
});