相关项目的断开链接

Question

我正在学习 VueJS 2 开发我个人博客的新版本。现在我的博客是基于 Django 的，下一个版本将基于 Django Rest Framework 和 Vue。

在博客文章页面视图下方：

<template>
  <div>
    <b-container fluid>
      <div class="text-center">
        <img class="blog-img-header" :src="post.header_image">
        <h1 class="blogpost-title">{{ post.title }}</h1>
      </div>
      <hr>
      <b-row class="text-center">
        <b-col cols="3">
          <h3>
            {{ post.local_date }}
          </h3>
        </b-col>
        <b-col cols="3">
           ...
        </b-col>
        <b-col cols="3">
          <b-button
              variant="info"
              size="sm"
              :to="{ name: 'single_category', params: { slug_category: slug_category } }">
            {{ post.category }}
          </b-button>
        </b-col>
        <b-col cols="3">
          <b-button
              variant="warning"
              size="sm"
              v-for="tag in post.tags" :key="tag.id"
              :to="{ name: 'single_tag', params: { slug_tag: tag.slug_tag } }"
          >
            {{ tag }}
          </b-button>
        </b-col>
      </b-row>
      <hr>
      <article v-html="post.contents" class="article-blog"></article>
    </b-container>
  </div>
</template>

<script>
import { mainApiEndpointV1, apiService} from "@/commons/api.service";

export default {
  name: "Post",

  components: {},

  props: {
    slug_category: {
      type: String,
      required: true,
    },
    slug_post: {
      type: String,
      required: true,
    },
  },

  data() {
    return {
      post: {},
    };
  },

  methods: {
    getPost() {
      let endpoint = mainApiEndpointV1() + `blog/${this.slug_category}/${this.slug_post}`;
      apiService(endpoint)
        .then((data) =>{
          console.log(data);
          this.post = data;
        });
    }
  },

  created() {
    this.getPost();
  },

};
</script>

我可以看到标题、内容和标签列表，但我无法使用链接 single_tag 在与单个标签相关的帖子列表之间导航。

当我尝试点击出现在使用标签的帖子列表中的帖子的链接 blog_post 时，会出现类似的问题。单标签视图下方：

<template>
  <b-container fluid="">
    <h1 v-if="tag.item_counts > 1">Articoli che parlano di <em>{{ tag.tag_name }}</em></h1>
    <h1 v-else>Articolo che parla di <em>{{ tag.tag_name }}</em></h1>
    <hr>
    <div v-for="post in tag.related_blogtag" :key="post.id">
      <h3>
        <router-link
            class="custom-router-link"
            :to="{ name: 'blog_post', params: { slug_post: post.slug_post } }"
        >
          {{ post.title }}
        </router-link>
      </h3>
      <p>{{ post.description }}</p>
      <hr />
    </div>
  </b-container>
</template>

<script>
import { mainApiEndpointV1, apiService} from "@/commons/api.service";

export default {
  name: "Tag",

  props: {
    slug_tag: {
      type: String,
      required: true,
    },
  },

  data() {
    return {
      tag: {},
    };
  },

  methods: {
    getTagDetails() {
      let endpoint = mainApiEndpointV1() + `blog-tags/${this.slug_tag}`;
      apiService(endpoint)
        .then((data) =>{
          console.log(data);
          this.tag = data;
        });
    }
  },

  created() {
    this.getTagDetails();
  },

};
</script>

在这两种情况下，如果我单击该链接，我将转到主页。我做错了什么？

这是路由器：

import Vue from "vue";
import VueRouter, { RouteConfig } from "vue-router";
import Home from "../views/Home.vue";
import Services from "../views/ServiceApp/List.vue";
import Service from "../views/ServiceApp/Single.vue";
import Categories from "../views/BlogApp/Category/List.vue";
import Category from "../views/BlogApp/Category/Single.vue";
import Post from "../views/BlogApp/Single.vue";
import Tags from "../views/BlogApp/Tag/List.vue";
import Tag from "../views/BlogApp/Tag/Single.vue";

Vue.use(VueRouter);

const routes: Array<RouteConfig> = [
  {
    path: "/",
    name: "home",
    component: Home,
  },
  {
    path: "/servizi",
    name: "services",
    component: Services,
  },
  {
    path: "/servizi/:slug_post",
    name: "single_service",
    component: Service,
    props: true,
  },
  {
    path: "/blog",
    name: "blog_home",
    component: Categories,
  },
  {
    path: "/blog/tags",
    name: "blog_tags",
    component: Tags,
  },
  {
    path: "/blog/tags/:slug_tag",
    name: "single_tag",
    component: Tag,
    props: true,
  },
  {
    path: "/blog/:slug_category",
    name: "single_category",
    component: Category,
    props: true,
  },
  {
    path: "/blog/:slug_category/:slug_post",
    name: "blog_post",
    component: Post,
    props: true,
  },
];

const router = new VueRouter({
  mode: "hash",
  // base: process.env.BASE_URL,
  routes,
});

export default router;