注冊頁面沒什么好說的，相應的路由項要增加，主頁面中的按鈕也要綁定

<script setup>
import {reactive} from "vue";
import router from "@/router";
import {Lock, User, Message} from "@element-plus/icons-vue";
const form=reactive(({
  username: '',
  password:'',
  password_repeat:'',
  email:'',
  code:''
}))
const rule={

}
</script>

<template>
<div style="text-align: center;margin:0 20px">
  <div style="margin-top: 100px">
    <div style="font-size: 25px;font-weight: bold">注冊新用戶</div>
    <div style="font-size: 14px;color:grey">歡迎注冊我們的學習平臺，請在下方填寫相關信息</div>
  </div>
  <div style="margin-top:50px">
    <el-form :model="form" :rules="rule">
      <el-form-item>
        <el-input v-model="form.username" maxlength="10" type="text" placeholder="用戶名">
          <template #prefix>
            <el-icon> <User /> </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.password" maxlength="10" type="password" placeholder="密碼">
          <template #prefix>
            <el-icon> <Lock /> </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.password_repeat" maxlength="10" type="password" placeholder="重復密碼">
          <template #prefix>
            <el-icon> <Lock /> </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.email" maxlength="10" type="text" placeholder="電子郵件地址">
          <template #prefix>
            <el-icon> <Message /> </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-row :gutter="10" style="width: 100%">
          <el-col :span="17">
            <el-input v-model="form.code" maxlength="10" type="password" placeholder="驗證碼">
              <template #prefix>
                <el-icon> <Message /> </el-icon>
              </template>
            </el-input>
          </el-col>
          <el-col :span="5">
      <el-button type="success" >獲取驗證碼</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <div style="">
      <el-button style="width: 270px" type="warning" plain>
        立即注冊
      </el-button>
    </div>
    <div style="margin-top: 20px">
      <span style="font-size: 14px;color: grey;line-height: 15px">已有賬號?</span>
      <el-link style="translate:0 -1px" @click="router.push('/')">立即登錄</el-link>
    </div>
  </div>

</div>
</template>

<style scoped>

</style>

Component inside renders non-element root node that cannot be animated.注意這里transition報錯，在所有頁面的template中都要使用div包裹起來

在welcomeview中加入過渡動畫

<template>
  <div style="width: 100vw;height: 100vh;overflow: hidden;display: flex">
    <div style="flex: 1;background-color: black">
      <el-image src="http://pic.bizhi360.com/bbpic/53/11153.jpg" style="width: 100%;height: 100%" fit="cover"/>
    </div>
    <div class="welcome-title">
      <div style="font-size: 30px;font-weight: bold">歡迎來到全球最大同性交友網站</div>
      <div style="margin-top: 10px;">在這里你可以學習哲學，并且與哲學之父密切交流</div>
      <div style="margin-top: 5px">在這里你可以同性交友，因為都是男的，沒有學哲學的女生</div>
    </div>
    <div class="right-card">
      <router-view v-slot="{ Component }">
        <Transition name="el-fade-in-linear"  mode="out-in">
          <component :is="Component"></component>
        </Transition>
      </router-view>
    </div>
  </div>
</template>