register.vue改写成这样了。发现页面没怎么实现，跟login页面流程走的。

<template>

    <div class="wrapper">

        <img src="http://www.dell-lee.com/imgs/vue3/user.png" alt="">

        <div class="wrapper__input">

            <input class="wrapper__input__content"

            v-model="data.username"

            placeholder="请输入用户名/手机号">

        </div> 

        <div class="wrapper__input">

            <input class="wrapper__input__content"

            v-model="data.userpassword"

            placeholder="请输入密码" type="password">

        </div> 

        <div class="wrapper__input">

            <input class="wrapper__input__content"

             placeholder="请确认密码" type="password">

        </div> 

        <div class="wrapper__register-button" @click="handleRegister">注册</div>

        <router-link :to='{name:"Login"}'>

            <div class="wrapper__register-link">已有账号去登入</div>

        </router-link>

    </div>

</template>

<script>

import axios from 'axios';

import { useRoute } from 'vue-router'

import { reactive } from 'vue';

// 引入路由其他功能实现点击直接跳转不用输入/home

export default {

  name:'Register',

  setup(){

      const data=reactive({

        username:'',

        password:''

      })

      const router=useRoute();

      const handleRegister=()=>{

        axios.post('https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd/api/userregister',{

        username: data.username,

        password: data.password

        }).then(()=>{

        alert('注册成功')

        router.push({name:'Login'})

        }).catch(()=>{

            alert('注册失败')

        })

      }

      return{handleRegister,data}

  }

}

</script>

<style lang="scss" scoped>

.wrapper{

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    margin-top: 50%;

    img{

      display: block;

      margin: 0 auto .4rem auto;

      width: .66rem;

      height: .66rem;  

    }

    .wrapper__input{

        height: .48rem;

        margin: 0 .4rem .16rem .4rem;

        padding: 0 .16rem;

        background: #f9f9f9;

        border: ipx solid rgba(0,0,0,0.10);

        border-radius: 6px;

        &__content{

            width: 100%;

            height: .48rem;

            border: none;

            background: none;

            outline: none;

            font-size: .16rem;

            &::placeholder{

                 color: #777;

            }

        }

    }

    .wrapper__register-button{

        margin: .32rem .4rem .16rem .4rem;

        background: #0091ff;

        box-shadow: 0 .04rem .08rem 0 rgba(0,145,255,0.32);

        border-radius: .04rem;

        color: white;

        line-height: .48rem;

        font-size: .16rem;

        text-align: center;

    }

    .wrapper__register-link{

        text-align: center;

        font-size: .16rem;

        color: #777;

    }

}

</style>

router中index.js页面我没操作

import { createRouter, createWebHashHistory } from 'vue-router'

// 引入两个页面用于路由路径展示

import Home from '../views/home/Home'

import Login from '../views/login/Login'

import Register from '../views/register/Register'

const routes = [

{

  path: '/',

  name: 'Home',

  component: Home

},

{

  path: '/register',

  name: 'Register',

  component: Register,

  beforeEnter(to,from,next){

    const isLogin=localStorage.isLogin;

    if(isLogin){

      next({name:'Home'})

    }else{ next() }

  }

},

{

  path: '/login',

  name: 'Login',

  component: Login,

  // 此处实现的是用户已经登入了就没必要再来到login这个页面了直接回到home页面

  beforeEnter(to,from,next){

    const isLogin=localStorage.isLogin;

    if(isLogin){

      next({name:'Home'})

    }else{ next() }

    console.log(to,from)

  }

},

  // {

  //   path: '/about',

  //   name: 'About',

  //   // route level code-splitting

  //   // this generates a separate chunk (about.[hash].js) for this route

  //   // which is lazy-loaded when the route is visited.

  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

  // }

]

const router = createRouter({

  history: createWebHashHistory(),

  routes

})

// 设置登入密码页面跳转功能

router.beforeEach((to,from,next)=>{

  // 在本地存储中添加访问Home功能

  const isLogin=localStorage.isLogin;

  // 此处实现的是你访问任何路径都只会跳转到Login页面

  if(!isLogin &&( to.name!=="Login"&&to.name!=='Register')){

    next({name:'Login'})

  }else{

    // next()表示当前页面

    next();

  }

})

export default router

在这里输入代码，可通过选择【代码语言】突出显示