目录前言参考登录页面基础框架layout.tsxpage.tsxTailWind使用好看的渐变颜色flex布局填充布局居中布局显示效果总结前言在适用了一下Anti之后发现，学起来成本实在太高了，先用Anti默认的目标凑合一下好了。反正我也就是一个普通的后端，能用React写就不错了，样式凑合凑合能用就行。

在上一章节，<router-linkto="/left">左</router-link>这种这种路由,to中的内容目前是固定的。被称之为声明式路由（或普通路由）编程式路由编程式路由，可以按需决定某组件的路径映射。vue-router提供了一个函数：useRouter语法格式如下：//该函数的返回值是一个路由对象。letrout

将 import{useRouter}from'next/router';改为 importRouterfrom"next/router";使用： Router.push('/');原来使用 import{useRouter}from'next/router';会导致报错如下  

背景前段时间给基于vue3的H5项目做一些优化，该项目经常会有一些页面间的通信，譬如选择地址、乘机人等信息后回填到上一个页面。对于这种简单、频繁的通信，实在不想搞成重火力（eg:pinia）。最好让使用者用完即走，不用操心除业务逻辑之外的任何事情。路由控制页面通信既然是页面间的

1.在vue3中有两种路由的引入方式第一种import{useRouter}from'vue-router'constuse_router=useRouter()use_router.push('/pathName')第二种importrouterfrom'@/router'router.push('/pathName') 2.两种方式的区别2.1.第一种方式的使用位置在vue

vue3路由新玩法useRoute和useRouter详解原文链接原来的vue2路由是通过this.$route和this.$router来控制的。现在vue3有所变化，useRoute相当于以前的this.$route，而useRouter相当于this.$router一、useRouter手动控制路由变化import{useRouter}from'vue-router'exportdef

useRouter（跳转）,useRoute（获取路由参数）//login.vue//路由跳转-引入-01import{useRouter}from"vue-router";//路由跳转-实例化后-02//useRouter使用push方法进行跳转constrouter=useRouter()//路由跳转-跳转到后台首页-03router.push('/')

import{useRoute,useRouter}from'vue-router'constrouter=useRouter()constroute=useRoute()router.push({path:'/index'})这种在正常.vue文件中引入没有

import{useRoute,useRouter}from'vue-router'constrouter=useRouter()constroute=useRoute()router.push({path:'/index'})这种在正常.vue文件中引入没

1.路由跳转<scriptsetup>import{useRouter}from"vue-router";constrouter=useRouter();functiontoDetail(){router.push({path:"/detail",});

import{useRouter}from'vue-router';exportdefault{setup(){const$router=useRouter();//点击方法functiongo(){$rou

单独创建的一个文件，封装了登录函数的业务逻辑，出现了一个警告，紧接着就是报错：说不能读取到路由的push函数。路由必须在组件里面使用，不能在ts或js文件中使用。还要注