vue对不存在的路由重定向404

1.先写好一个404的页面，设为notfound.vue

<template>
<div>
    <h2>抱歉，您输入的地址没有找到</h2>
    <h3>o(╥﹏╥)o</h3>
    <el-button type="text" @click="goLogin">点击返回主页</el-button>

</div>
</template>

<script>
export default {
    name: 'notfound',
    data() {
        return {

        }
    },
    methods: {
        goLogin() {
            this.$router.push({
                path: '/'
            })
        }
    },
    mounted() {
        (document.getElementById('loading')).style.display = "none"
    }
}
</script>
<style scoped>

</style>

2.在路由设置页面/router/index.js
先引用该组件

import notfound from '@/components/notfound'

在所有路由的最后加上

{
  path: '/404',
  name: '404',
  component: notfound
},
{
 path: '*',
  redirect: '/404'
}