在vuepress中更改404页面

时间:2018-08-06 07:28:56

标签: vuepress

是否可以更改/自定义Vuepress的404页面,而无需弹出并且不必更改整个主题?

我当前正在使用enhanceApp.js,但是由于已经创建了路由器,因此我不确定如何更改路由器选项(全部路由)。我现在使它工作的方式是:

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

但是,这感觉就像是黑客一样,因为我总是重定向到包含我的404的自定义和现有页面。有没有更正式的方法呢?

1 个答案:

答案 0 :(得分:1)

我有一个基于Vuepress 1.5.x的网站,并且能够在主题/布局下简单地创建一个名为NotFound.vue的页面。无需更改EnhanceApp.js。

Vuepress本身似乎已经知道了基于code here的保留版式名称。

我以前有一个名为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>