.nuxt框架开发pc 配置404页面

.nuxt框架开发pc

配置404页面

layouts 这个文件是框架自带的，可以直接创建一个子文件名字为error 具体错误内容自己定

<template>
  <div class="col-md-6 align-self-center">
        <h1>404</h1>
        <h2>UH OH! 页面丢失</h2>
        <p>您所寻找的页面不存在。你可以点击下面的按钮，返回主页。
        </p>
        <a href="/">
            <button class="btn green">返回首页	</button>
        </a>
      </div>
</template>

<script>
    export default {
        props :['error']
    }
</script>

页面使用error 方法

注意点：asyncData()

asyncData 是在 vue 页面创建期间调用，用于给页面变量进行赋值的数据。

和 data 之间的区别就是，在 SSR 渲染过程中这部分数据会被加载到页面上，SEO 可以检索到这部分数据。

而在 mounted 中获取的数据需要先保存到 data 中再进行渲染，所以如果你的数据放在 mounted 中加载，SEO 是检索不到这部分数据的。

 async asyncData({ store, params, error, req }) {
    console.log(params);
    let { id } = params;
    const res = await axios.get(
      `接口地址加参数`
    );
    if (res.data.code === 200) {
      return {
        chaoJi: res.data.data,
      };
    } else {
        //页面使用可直接调用`error` 方法
      error({ statusCode: 404, message: "页面未找到" });
    }
  },