Vue.js VueJS-使用嵌套路由的非活动链接

我对Vue和web框架都是新手，但我需要学习如何使用它，因此我决定使用VueJS 2和Django Rest框架重新构建我的个人网站。现在我的网站是基于Django和点击模板“生成器”

我需要复制这种url:

site.name/service\u name/page\u slug\u title

我创建了以下脚本：

ServiceList.vue

import { mainApiEndpoint, apiService } from "../../common/api.service";

export default {
  name: "Services",

  data() {
    return {
      services: [],
    };
  },

  methods: {
    getServices() {
      let endpoint = mainApiEndpoint() + "services/";
      apiService(endpoint)
        .then((data) => {
          this.services.push(...data);
        });
    },
  },

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

};

import { mainApiEndpoint, apiService } from "../../common/api.service";

export default {
  name: "Service",

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

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

  methods: {
    getServiceDetails() {
      let endpoint = mainApiEndpoint() + `services/${this.slug_post}`;
      apiService(endpoint)
        .then((data) =>{
          this.service = data;
        });
    }
  },

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

};

服务.vue

import { mainApiEndpoint, apiService } from "../../common/api.service";

export default {
  name: "Services",

  data() {
    return {
      services: [],
    };
  },

  methods: {
    getServices() {
      let endpoint = mainApiEndpoint() + "services/";
      apiService(endpoint)
        .then((data) => {
          this.services.push(...data);
        });
    },
  },

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

};

import { mainApiEndpoint, apiService } from "../../common/api.service";

export default {
  name: "Service",

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

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

  methods: {
    getServiceDetails() {
      let endpoint = mainApiEndpoint() + `services/${this.slug_post}`;
      apiService(endpoint)
        .then((data) =>{
          this.service = data;
        });
    }
  },

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

};

以及使用以下各项的相关路线：

当我点击进入页面

servizi

的链接时，我可以在预览中看到正确的url，但什么也没有发生。但如果我不使用嵌套管线：

  {
    path: "/servizi",
    name: "services",
    component: ServicesList,
  },
  {
    path: ":slug_post",
    name: "service",
    component: Service,
    props: true,
  },

我可以导航到正确的页面，但url不正确，它是

site.name/page\u slug\u title

而不是

site.name/service\u name/page\u slug\u title

---

我做错了什么？

您在router/index.js中的路径错误。你应该把完整的路径放进去

{
路径：“/servizi”，
名称：“服务”，
组件：服务列表，
},
{
路径：“/servizi/：slug\u post”，
名称：“服务”，
组成部分：服务，
道具：没错，
},

问题取决于

历史记录

模式。传递到

hash

我没有问题。

对于您的解决方案，当我转到

/servizi/：slug\u post

时，我会看到一个空白页，因为您的“服务”组件没有模板