[Vue]404エラーページを作成

3955 ワード
Vue.js 404 vue-router 404 テキストリンク

概要

Vue-Routerを利用して存在しないページに遷移した場合の404エラーページを作成します。

作ると言ってもvue-routerに機能として存在するのですぐできます。

実装

Vue-router

router.js

import NotFoundComponent from './components/top/NotFoundComponent'

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      name: 'notFound',
      path: '*', 
      component: NotFoundComponent 
    }
  ],
)}

NotFoundComponent作成

NotFoundComponent.vue
<template>
  <div>
    <img
      :src="`/images/404.svg`"
      alt="404">
  </div>
</template>
<script>
<style scoped>
img{
  width: 100%;
}
@media (max-width: 1000px){
div{
  background: #DEF2FF;
  width: 100vw;
  height: 80vh;
}
}
</style>

templateも画像で済ませているので、めちゃくちゃ手を抜いてます。笑
時間ある時に凝ったものを作ろうと思います。

ただ画像がそれっぽければそれっぽい。笑

まとめ

機能として404エラーページ簡単に実装できるので便利ですね。