> For the complete documentation index, see [llms.txt](https://zpliu.gitbook.io/booknote/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zpliu.gitbook.io/booknote/cottonweb/views/404-ye-mian.md).

# 404页面

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

## 居中布局

* 使用`flex`布局，并且水平对齐方式为`center`
* 设置按钮点击事件

```javascript
    <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图片的显示

```css
.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函数进行手动路由跳转

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

[github源码固定地址](https://github.com/zpliu1126/cottonweb/blob/64dd317860569cc11bd6705489ff936f05689482/src/views/404.vue)