From c2a8e29ef993e620086f1f1ff45c2caa203f5e9d Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Thu, 6 Feb 2020 23:20:59 +0900 Subject: [PATCH] Not found page --- locales/ja-JP.yml | 2 ++ src/client/pages/not-found.vue | 36 ++++++++++++++++++++++++++++++++++ src/client/router.ts | 2 +- 3 files changed, 39 insertions(+), 1 deletion(-) create mode 100644 src/client/pages/not-found.vue diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index cb5e5d757..4d97952d9 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -352,6 +352,8 @@ autoReloadWhenDisconnected: "サーバー切断時に自動リロード" autoNoteWatch: "ノートの自動ウォッチ" reduceUiAnimation: "UIのアニメーションを減らす" share: "共有" +notFound: "見つかりません" +notFoundDescription: "指定されたURLに該当するページはありませんでした。" _2fa: registerDevice: "デバイスを登録" diff --git a/src/client/pages/not-found.vue b/src/client/pages/not-found.vue new file mode 100644 index 000000000..05bd34772 --- /dev/null +++ b/src/client/pages/not-found.vue @@ -0,0 +1,36 @@ +<template> +<div class=""> + <portal to="icon"><fa :icon="faExclamationTriangle"/></portal> + <portal to="title">{{ $t('notFound') }}</portal> + + <section class="_card"> + <div class="_title"><fa :icon="faExclamationTriangle"/> {{ $t('notFound') }}</div> + <div class="_content">{{ $t('notFoundDescription') }}</div> + </section> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'; +import i18n from '../i18n'; + +export default Vue.extend({ + i18n, + + metaInfo() { + return { + title: this.$t('notFound') as string + }; + }, + + data() { + return { + faExclamationTriangle + } + }, +}); +</script> + +<style lang="scss" scoped> +</style> diff --git a/src/client/router.ts b/src/client/router.ts index 70bc48c49..c1140355f 100644 --- a/src/client/router.ts +++ b/src/client/router.ts @@ -53,7 +53,7 @@ export const router = new VueRouter({ { path: '/auth/:token', component: page('auth') }, { path: '/authorize-follow', component: page('follow') }, { path: '/share', component: page('share') }, - /*{ path: '*', component: MkNotFound }*/ + { path: '*', component: page('not-found') } ], // なんかHacky // 通常の使い方をすると scroll メソッドの behavior を設定できないため、自前で window.scroll するようにする