Как я могу поделиться ссылками Nuxt. js вне моего приложения? - PullRequest
Новая
       36

Как я могу поделиться ссылками Nuxt. js вне моего приложения?

0 голосов
/ 13 марта 2020

Я создал приложение Nuxt + Vue, в котором есть страница блога. Каждый пост в блоге генерируется с использованием frontmatter-markdown, который преобразует .md постов в отдельные статьи блога. Это динамические c маршруты в Nuxt.

На моем веб-сайте вы можете перейти к ним по их динамически создаваемым URL-адресам: https://my-site.com/posts/blog-post-1.

Я пытаюсь добавить функцию обмена в социальных сетях. для обмена отдельными сообщениями в блоге. Но когда я развернул сайт и ввел URL-адрес, подобный указанному выше, я получил ошибку «Страница не найдена».

Я искал ответ на этот вопрос и не нашел ничего ясного. Я что-то упустил из-за c маршрутизации Vue?

Кстати, развертывание на Netlify.

На моей странице маршрута Dynami c приведен код, который я использую для создания URL-адреса (где computed - это то, что я передаю своим значкам социальных сетей, а asyncData читает параметры из каждого md файла): 

computed: {
    shareUrl() {
      const currentUrl = 'https://my-site.com' + this.$route.fullPath + '/';

      return currentUrl
    }
  },
  async asyncData({ params }) {
    try {
      console.info(params.slug);
      let post = await import(`~/content/${params.slug}.md`);
      return {
        title: post.attributes.title,
        subtitle: post.attributes.subtitle,
        tags: post.attributes.tags,
        bannerimg: post.attributes.bannerimg,
        projectLink: post.attributes.projectLink,
        singlePostComponent: post.vue.component
      };
    } catch (err) {
      console.debug(err);
      return false;
    }
  }

А внутри моего nuxt.config.js у меня есть это: 

async function getDynamicPaths(urlFilepathTable) {
  return [].concat(
    ...Object.keys(urlFilepathTable).map(url => {
      var filepathGlob = urlFilepathTable[url];
      return glob
        .sync(filepathGlob, { cwd: "content" })
        .map(filepath => `${url}/${path.basename(filepath, ".md")}`);
    })
  );
}

export default async() => {
  return {
  ...

  generate: {
      routes: await getDynamicPaths({
        "/posts": "posts/*.md"
      })
    },
   }
}
...