前言

前面已经解读了store和router,今天就打算从一个具体的功能模块上面来进行解读

本文中所解读的项目代码地址

https://github.com/un-pany/v3-admin-vite/blob/main/src/pages/login/index.vue

开始，路由的梳理

通过查看App.vue
发现router_view

到router/index.ts
发现默认路由是一个叫Layouts的组件
到layouts/index.vue
先用useResize() 根据浏览器宽度变化，变化Layout布局，从而使用不同的布局模式

来到左侧布局模式

我们主要观测其中的AppMain，这个是负责展示页面主要内容的


来到AppMain(layouts/components/AppMain/index.vue)
根据页面路由自动选择对应组件来渲染
Vue的内置组件 ​ 用于动态渲染的标签

用于动态渲染的标签

使用v-slot获取到当前router-view展示的组件和当前的路由
在此，我是不熟练于这个v-slot的用法的，也不确定在router-view标签里面放一个组件或其它标签会是什么结果,所以需要自己尝试下

到此之后我们的路由踪迹追索似乎就结束了，那我们进行一个案例假设

首先路由大致结构是
App.vue :默认（页面路径为：‘/’）渲染了
layout: 根据屏幕宽度动态渲染了 一种左侧布局:
LeftMode:固定渲染了
AppMain:根据页面路由动态渲染了不同的组件

到这里我们应该就很好的理解了，这么分多个步骤的引用来进行操作的目的：
1.是为了进行适应不同屏幕宽度的页面渲染
接下来，我们回到router文件中去，看看在页面路径为：“/”时 Appmain里的router-view会默认渲染哪个组件

如下图所示
我们路由设置中，设置了 路径为：“/” 会重定向到dashboard组件上去，然后由于重定向后的路径是Layouts的子路由，所以Layouts也会渲染。
到此我们就发现了AppMain中的router-view渲染的组件应该是dashboard组件了

我们顺着路由来看看这个dashboard组件
这里又根据了用户的登录权限来判定是显示Admin组件还是Editor组件

欸，到这里我又发觉到不对了，登录注册的路由去哪里了呢，为什么直接默认就渲染用户登录后界面了呢。
别急，且往下看，我们看看router的其它路由配置
*path:“/login 登录路由”

那我们会什么时候用到登录路由呢，当然是在页面跳转和初始加载的时候进行一个登录鉴权判断是否登录后再跳转到登录路由的，所以我们需要去看路由守卫

登录判定


ok,那接下来还有什么疑问吗
路由这块是进行了一个简单的梳理，接下来我们看看该项目的登录注册功能是怎么写的

登录页面

页面路由: /login

页面文件路径：src/pages/login/index.vue

页面资源文件路径：src/pages/login/(apis,components,composables,images)

index.vue

代码解读

代码量较大这里就不放出来了，但是从我的观察来看这个index.vue登录文件的代码中对于ts的使用痕迹似乎基本没有
仔细想想，这个页面的创建流程：
创建文件->div搭建+样式搭建->创建变量并将之与表单绑定（这一步会用到ts来进行变量创建的吧）->创建方法用于发送登录请求、注册请求(这一步貌似也会用到ts来创建方法)->完成登录保存用户信息（会用到store，但是我们前面几期已经解读过store相关的ts写法了）
ok那我们先去看看创建变量并绑定表单这一步

创建变量并绑定表单

下面代码使用reactive创建了变量，并不是使用普通的js直接创建变量，那么使用reactive创建loginFormData和使用ts语法创建变量又有什么区别呢。

/** 登录表单数据 */
const loginFormData: LoginRequestData = reactive({
  username: "admin",
  password: "12345678",
  code: ""
})