Изменить страницу 404 в vuepress

Question

Можно ли изменить / настроить страницу 404 Vuepress без извлечения и необходимости менять всю тему?

Я в настоящее время использую enhanceApp.js, но я не уверен, как я могу изменить параметры маршрутизатора (универсальный маршрут), поскольку маршрутизатор уже создан. Способ, которым я получил это прямо сейчас, таков:

router.beforeEach((to, from, next) => {
  if (to.matched.length > 0 && to.matched[0].path === "*") {
    next("/404.html");
  } else {
    next();
  }
});

Однако, это похоже на хак, так как я всегда перенаправляю на пользовательскую и существующую страницу, содержащую мой 404. Есть ли более официальный способ сделать это?

Answer 1

У меня есть сайт, основанный на Vuepress 1.5.x, и я смог просто создать страницу с именем NotFound.vue в разделе theme/layout. Никаких изменений в hanceApp.js не требуется.

Сам Vuepress, похоже, уже знает об этом зарезервированном имени макета, основываясь на приведенном здесь коде.

Ранее у меня была эта страница с именем 404.vue, но я получал предупреждение о том, что страницы должны соответствовать надлежащим стандартам именования компонентов HTML 5. Просто переименование его в NotFound.vue помогло.

Содержимое моего файла NotFound.vue:

<template>
  <BaseLayout>
    <template #content>
      <v-container class="text-center">
        <div class="py-6" />
        <h1>Oops!</h1>
        <p>Nothing to see here.</p>
        <v-btn class="cyan--text text--darken-3"
          exact :to="'/'" text>Go home</v-btn>
      </v-container>
    </template>
  </BaseLayout>
</template>

<script>
export default {
  name: "NotFound"
};
</script>