Error404——哇！你的网页飞到外太空了~

好看的网页千篇一律，有趣的代码万里挑一。

做前端的盆友们都应该十分熟悉Error404，这是一个备用页面，就是页面跳转失败时，或者要跳转的页面还没搭建好时，给用户跳转的一个页面。
关键字：Error404、路由、*

路由配置

{
    path:'/index',
    // 重定向到指定的路由
    redirect:'/'
},
{
    // 注意：这里的路由需要传一个参数，路由可以传多个参数
    path:'/city/:id',
    // 设置该选项为true，组件可以通过props选项接收路由参数
    props:true,
    component:City
},
// *号，表示匹配不上的所有路由
{
    path:'*',
    component:Error404
}

去网站找一张图片，放到文件assets中

404

在文件夹Views中新建一个文件命名Error404.vue

<template>
  <div class="error">
    <img src="../assets/error.gif" @click="gotoHome" />
  </div>
</template>
<script>
export default {
  name: "Error404",
  methods: {
    gotoHome() {
      this.$router.replace("/home");
    },
  },
};
</script>
<style scoped>
.error {
  background-color: white;
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
}
.error img {
  height: 100%;
}
</style>

新建一个文件夹router，在router的index.js中配置路由

配置路由

import Error404 from '@v/Error404.vue'
Vue.config.productionTip = false

Vue.use(VueRouter)

const routes = [{
path: '*',
    name: 'Error404',
    component: Error404,
}]

最终效果

星号，代表全部。
当你输入未定义的网页时，就会跳出这个宇航员了！
还可以在Error404的页面中设置一个链接跳回主页。
这张图片是动图哦，很可爱的，试试吧！
而且，以后都可以直接使用了，一劳永逸。