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>