Vueで404ページ

今回はrouter.jsの中で指定したpathが存在しない場合の404ページを作ってみようと思います。

// router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home'
import Like from './components/Like'
import User from './components/User'
import Message from './components/Message'
import MessageTop from './components/MessageTop'

// 作成した404ページを定義
import NotFound from './components/NotFound
Vue.use(Router)

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home
        },
        { 
            path: '/like',
            name: 'Like',
            component: Like
        },
        {
            path: '/user',
            name: 'User',
            component: User
        },
        {
            path: '/messages',
            name: 'MessageTop',
            component: MessageTop
        },
        {
            path: '/message',
            name: 'Message',
            component: Message
        },
        // 404ページを指定
        {
          path: '*',
          name: 'NotFound',
          component: NotFound
        },
    ]
})

上から順番に指定していったpath意外の物がurl内に記述された場合、一番最後に定義した404が呼び出されるようになっています。

ブログの投稿ログ