Question

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

我需要重现这种网址：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,
  },

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

我做错了什么？

Answer 1

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

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

Answer 2

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

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

2 个答案: