要求登录页、注册页，用Vue3来实现，要求前端发起axios请求，能拿到后端数据，并能把该数据正确渲染到页面上去

好的，下面是使用Vue3和Axios实现登录页和注册页的示例代码。

首先，需要在项目中安装vue和axios两个库：

npm install vue axios --save

然后，我们可以编写两个组件：`LoginPage`和`RegisterPage`，分别用来展示登录页和注册页。在这两个组件中，我们可以使用`reactive()`函数来创建一个响应式状态对象，包含用户填写的表单数据和后端返回的数据。在提交表单时，我们使用`axios.post()`方法向后端发送请求，并将响应数据赋值给响应式状态对象中的`data`属性。

下面是示例代码：

LoginPage.vue

<template>
  <div>
    <h1>登录页</h1>
    <form @submit.prevent="submitForm">
      <label>
        用户名：
        <input type="text" v-model="form.username" required>
      </label>
      <br>
      <label>
        密码：
        <input type="password" v-model="form.password" required>
      </label>
      <br>
      <button type="submit">登录</button>
    </form>
    <div v-if="data">{{ data }}</div>
  </div>
</template>

<script>
import axios from 'axios';
import { reactive } from 'vue';

export default {
  setup() {
    const form = reactive({
      username: '',
      password: '',
    });
    const data = reactive({
      message: '',
    });

    const submitForm = async () => {
      try {
        const response = await axios.post('/api/login', form);
        data.message = response.data;
      } catch (error) {
        console.error(error);
      }
    };

    return {
      form,
      submitForm,
      data,
    };
  },
};
</script>

RegisterPage.vue

<template>
  <div>
    <h1>注册页</h1>
    <form @submit.prevent="submitForm">
      <label>
        用户名：
        <input type="text" v-model="form.username" required>
      </label>
      <br>
      <label>
        密码：
        <input type="password" v-model="form.password" required>
      </label>
      <br>
      <button type="submit">注册</button>
    </form>
    <div v-if="data">{{ data }}</div>
  </div>
</template>

<script>
import axios from 'axios';
import { reactive } from 'vue';

export default {
  setup() {
    const form = reactive({
      username: '',
      password: '',
    });
    const data = reactive({
      message: '',
    });

    const submitForm = async () => {
      try {
        const response = await axios.post('/api/register', form);
        data.message = response.data;
      } catch (error) {
        console.error(error);
      }
    };

    return {
      form,
      submitForm,
      data,
    };
  },
};
</script>

在上面的示例代码中，我们使用了Vue3的`setup()`函数来组织代码。在`setup()`函数中，我们使用了`reactive()`函数来创建响应式状态对象，包含了用户填写的表单数据`form`和后端返回的数据`data`。在提交表单时，我们使用`axios.post()`方法向后端发送请求，并将响应数据赋值给`data.message`，从而触发Vue的响应式系统更新视图。

最后，我们在模板中通过`v-if`指令来判断`data`是否存在，如果存在，则显示后端返回的数据。