20251222项目练习

路由代码：

index.js

import { createRouter } from "vue-router"; import { createWebHistory } from "vue-router"; const routes = [ { path: '/', name: 'gen', redirect: '/login' }, { path: '/login', name: 'login', component: () => import('@/views/LoginView.vue') }, { path: '/register', name: 'register', component: () => import('@/views/RegisterView.vue') }, { path: '/home', name: 'home', component: () => import('@/views/HomeView.vue') } ] const router = createRouter({ history: createWebHistory(), routes }) export default router

登录

<template> <span>登录信息</span> <br/> <br/> <button @click="goRegister">注册</button> </template> <script setup> import { useRouter } from 'vue-router'; const router = useRouter() const goRegister = () => { router.push('/register') } </script>

注册

<template> <span>注册信息</span> <br/> <br/> <button @click="toLogin">登录</button> </template> <script setup> import { useRouter } from 'vue-router'; const router = useRouter() const toLogin = () => { router.push("/login") } </script>

主页

<template> <div class="home">网站首页界面</div> </template> <style scoped> div.home { padding: 50px; background-color: pink; } </style>