$pagination.pages contains extra page not in directory

[Shelby Landen]

• I confirm that this is an issue rather than a question.

Bug report

Steps to reproduce

• I prepared a reproduction repo, here is the reproduction repo:

• This issue doesn't need a reproduction repro, here is the steps to reproduce

1. npm i -D vuepress @vuepress/plugin-blog
2. add the following to package.json scripts: "dev": "vuepress dev src"
3. add src/.vuepress/theme/layouts directory with Layout.vue file
4. in Layout.vue add the following:

<template>
  <div v-if="$route.path === '/'">
    {{log({path: $route.path, equal: $route.path === '/'})}}
    <Content />
  </div>
  <div v-else>
    {{log($pagination.pages)}}
    <div v-for="page in $pagination.pages">{{page.title}}</div>
    <Pagination v-if="$pagination" />
  </div>
</template>

<script>
import { Pagination } from "@vuepress/plugin-blog/lib/client/components";
export default {
  components: { Pagination },
  methods: {
    log(x) {
      console.log(x);
    }
  }
};
</script>

5. in the .vuepress folder, add config.js with the following:

module.exports = {
  plugins: [
    [
      '@vuepress/blog',
      {
        directories: [
          {
            // Unique ID of current classification
            id: 'post',
            // Target directory
            dirname: 'posts',
            // Path of the `entry page` (or `list page`)
            path: '/posts/',
            itemPermalink: '/:regular'
          },
        ],
        globalPagination: {
          lengthPerPage: 3
        }
      },
    ],
  ],
}

6. add src/posts/ directory with at least four test MD files. Four, because I set the pagination length to 3. They can be empty.
7. npm run dev
8. open in a web browser and navigate to /posts
9. navigate to the last pagination page using the Pagination component
10. inspect the console for an object which will contain $pagination.pages
11. notice that there will be an extra page logged with a path property like /posts/page/2/
12. in config.js, in the directory classifier, remove the trailing slash from path: '/posts/' to path: '/posts'
13. restart the server (Vuepress doesn't hot reload configs and MD files) and repeat steps 8-10
14. notice that the logged $pagination.pages does not contain the extra page like before

What is expected?

$pagination.pages is expected to only contain the pages that exist in the /posts directory.

What is actually happening?

According to the docs, the trailing slash is correct. However, this seems to incorrectly add some sort of non-post page in the $pagination.pages array on the last pagination page.

This is a problem because a blog index component, such as the one in the official blog theme, builds the list of posts by looping with v-for="page in $pagination.pages".

In the official theme, it's not as noticeable but it creates an empty "post" at the end. For me, I'm listing the posts in a card style and on the last page, I have this weird empty/garbage card at the end.

Other relevant information

• npx vuepress info:

[Valery Qwertovsky]

If directories.dirname equals directories.path, then page/1, page/2, ... will be processed as posts from directories.dirname.
Renaming source directory solves the problem.

[Shelby Landen]

@Qwertovsky So if I have a directory object with dirname: 'posts' and path: '/posts/', I need to change dirname to something else such as dirname: 'something-else'? Or, do I need to change the actual folder's name on the file system from /posts to /something-else?

[Valery Qwertovsky]

@slanden Change both. dirname: 'something-else' means markdown files for posts are on the file system in the folder with name something-else.

[Shelby Landen]

@Qwertovsky Ah, thank you. Is this intended behavior? If so, maybe we can document this as a side note or something?

[Billy Chin]

@slanden Sorry for late reply.

It's not intended behavior. It'll be fix by #53.

Thanks for report.