404页面

404页面的配置很简单，只用了一个GIF动图，以及使用elemen-ui的布局；在点击按钮上使用了手动路由。

居中布局

• 使用flex布局，并且水平对齐方式为center

• 设置按钮点击事件

    <el-row type="flex" justify="center">
      <el-col :xs="24" :sm="12">
        <div class="four_zero_four_bg">
          <h1 class="text-center">404</h1>
        </div>
        <div class="contant_box_404">
          <h3 class="h2">Look like you're lost</h3>

          <p>the page you are looking for not avaible!</p>

          <el-button type="success" @click="handlegoHome">Go to Home</el-button>
        </div>
      </el-col>
    </el-row>

CSS设置背景

• text-align :center用于将el-col内的字居中

• .four_zero_four_bg设置了GIF图片的显示

.page_404 {
  padding: 40px 0;
  background: #fff;
  font-family: "Arvo", serif;
  text-align: center;
}

.four_zero_four_bg {
  background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
  height: 400px;
  background-position: center;
}

路由跳转事件

• 当用户点击是，调用router中的push函数进行手动路由跳转

    handlegoHome() {
      this.$router.push({
        path: "/",
        name: "home"
      });
    }

github源码固定地址