从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战五（引入vue-router，并给注册功能加上美丽的外衣el-form）

本文主要是介绍从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战五（引入vue-router，并给注册功能加上美丽的外衣el-form），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

安装vue-router

pnpm install vue-router

创建router

src下新增router目录，ruoter目录中新增index.ts

import { createRouter, createWebHashHistory } from "vue-router";
const routes = [{path: "/",name: "Home",component: () => import("@/views/home/index.vue"),},{path: "/register",name: "Register",component: () => import("@/views/register/index.vue"),}
];const router = createRouter({history: createWebHashHistory(),routes,
});export default router;

创建首页

src下新增views目录，views目录下新增home目录，home目录下新增index.vue文件

<template><div>this is home page</div><div class="txt-r"><router-link to="/register">没有账号？去注册</router-link></div>
</template>

创建注册页

views目录下新增register目录，register目录下新增index.vue文件

<template><div><el-form :model="user" label-width="86px"><h3 class="title">系统注册</h3><el-form-item label="用户名" prop="username"><el-input v-model="user.username" placeholder="请输入用户名" prefix-icon="user"></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="user.email" placeholder="请输入邮箱" prefix-icon="message"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="user.password" type="password" placeholder="请输入密码" prefix-icon="lock"></el-input></el-form-item><el-form-item label><el-button type="primary" @click="doRegister">注册</el-button></el-form-item></el-form></div>
</template><script setup lang="ts">
import { useRouter } from 'vue-router';
import { register } from '@/api';
import { ref } from 'vue'
import type { User } from '@/types';
const router = useRouter();const user = ref<User>({email: '',username: '',password: ''
});const doRegister = async () => {try {const res = await register({ user: user.value });console.log(res.data.user);router.push({ name: 'Home' });} catch (error) {}
}
</script>

main.ts引入router对象

修改App.vue

<template><router-view></router-view>
</template>

运行测试

点击 去注册

表单校验

修改register/index.vue

再次测试验证

这篇关于从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战五（引入vue-router，并给注册功能加上美丽的外衣el-form）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---