VueJS - 使用嵌套路由的非活动链接答案

【问题标题】：VueJS - Inactive link using Nested RoutesVueJS - 使用嵌套路由的非活动链接
【发布时间】：2021-05-14 10:06:46
【问题描述】：

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

我需要复制这种url：site.name/service_name/page_slug_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();
  },

};

Service.vue

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();
  },

};

以及使用Nested Routes的相对路由：

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

当我点击进入页面servizi 的链接时，我可以在预览中看到正确的网址，但没有任何反应。但如果我不使用嵌套路由：

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

我可以导航到正确的页面，但 url 不正确，它是 site.name/page_slug_title 而不是 site.name/service_name/page_slug_title。

我做错了什么？

【问题讨论】：

标签： vue.js django-rest-framework vuejs2 vue-router

【解决方案1】：

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

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

【讨论】：

Whit your solution 我去/servizi/:slug_post时看到一个空白页
因为你的“服务”组件没有模板

【解决方案2】：

问题取决于history 模式。传给hash我没问题。

【讨论】：