Question

我正在用Nuxt和markdown文件构建博客。

我的页面文件夹树看起来像这样

pages
├── index.vue
├── posts
│   ├── index.vue
│   └── _slug.vue

我将markdown文件包含在名为content的文件夹中，该文件夹现在看起来像这样：

content
├── test2.md
└── test.md

如何在/posts/test中以编程方式获取路线/posts/test2和posts/index.vue？

我基本上一直在关注这个post。

但是，作者在步骤＃5 中添加了<nuxt-link to="#"></nuxt-link>，但没有显示如何以编程方式获取“＃”。

如果我导航到/posts/test或/posts/test2，则服务器会找到路由。这是基于我在提到的帖子和有关动态路由的nuxt文档中所阅读的内容。

我的post/index.vue文件看起来像

<template>
    <div>
        <h1>My blog posts</h1>
        <ul>
            <li v-for="post in posts" :key="post.attributes.title">
                <nuxt-link to="#">{{ post.attributes.title }} </nuxt-link>
            </li>
        </ul>
    </div>
</template>
<script>
  export default {
    async asyncData({ params }) {
      const resolve = require.context("~/content/", true, /\.md$/)
      const imports = resolve.keys().map((key) => {
        const [, name] = key.match(/\/(.+)\.md$/);
        return resolve(key);        
      });
      return {
        posts: imports,
      }
    },
  }
</script>

这是使用{{ post.attributes.title }}正确列出了不同的帖子，但我在这些属性中找不到路线。

然后目标是能够修改行

<nuxt-link to="#">{{ post.attributes.title }} </nuxt-link>

类似

<nuxt-link to={{ post.route }} >{{ post.attributes.title }} </nuxt-link>

我怎么得到那个post.route？

如何获取动态嵌套路由，使其包含在列出到路由的所有链接的页面的<nuxt-link to = ???>组件中？

0 个答案: