現象

URLに日本語が含まれてるページで

リロードすると404になる。

解決方法

とりあえず暫定的だが、404.vueを編集してリダイレクトさせる。

<template>
  ...
</template>

<script>
export default {
  created() {
    // 以下追加
    if (this.$route.params.pathMatch != this.$route.path) {
      this.$router.push(this.$route.params.pathMatch);
    }
  },
};
</script>

これでリロードした際にも画面がちゃんと表示されるようになった。

なにが原因だったのか

リロードすると日本語がエンコードされてしまうのがダメみたい。

OK: /tag/フリーランス/
NG: /tag/%E3%83%95%E3%83%AA%E3%83%BC%E3%83%A9%E3%83%B3%E3%82%B9/

ブラウザ上ではエンコードされてないように見えても、vueの$route.pathを確認するとエンコードされていることがわかる。

console.log(this.$route.path);
// /tag/%E3%83%95%E3%83%AA%E3%83%BC%E3%83%A9%E3%83%B3%E3%82%B9/

エンコードされたpathを$router.pushしても解決しない。
期待する動作が欲しいならエンコードされていないpathをpushしてあげる必要がある

console.log(this.$route.params.pathMatch);
// /tag/フリーランス/

残課題

ひとまずこれで見栄えは良くなったが、警告は当然でてる。
まだVuePress詳しくないのでこの辺はやる気があれば続きを...。

「vuepress reload 404」で検索してる人のお役にたてば。

以上。