[vue3]HTML Learn Data Day 10

感觉已经算是学完了，有些东西稍微了解一下，还有没涉及到的东西估计一辈子都碰不到。
上大学之前追求创造属于自己的一些东西，比如有趣的个人网站，或者小游戏。
ai让这些变得触手可及，我所追求的东西已经得到了，接下来该做什么呢？
找工作估计用不着，不过在造点小玩意的时候还是挺常用的。

原帖地址：https://www.cnblogs.com/Reisentyan/p/19885616

1. TypeScript 接口与类型约束

在 Vue 3 项目中，为了提高代码的可维护性和类型安全，通常会集中管理类型定义。

规范做法：在 src 目录下创建 types 文件夹，并新建 index.ts。在这个文件中通过 export interface 或 export type 声明变量类型。
优势：其他组件可以直接引入这些共用类型，避免重复定义，并且在编写代码时能享受编辑器的自动补全和类型检查。

2. 组件通信：Props 的使用

在父子组件中传递数据时，props 是最常用的方式。Vue 模板语法中，属性前是否带有冒号 :（v-bind 的简写）决定了数据的解析方式。

父组件传递数据：

<Person a="1+1" :b="1+1" />

子组件接收数据 (Person.vue)：

import { defineProps } from 'vue'

// 基础接收方式（你笔记中的写法）
const props = defineProps(['a', 'b'])

// 💡 补充：既然学了 TS，更推荐使用泛型约束的写法，这样会有完美的类型提示
const props = defineProps<{
  a: string
  b: number
}>()

3. 自定义 Hooks (组合式函数 / Composables)

修正：在 Vue 3 中，官方更准确的称呼是 组合式函数 (Composables)。虽然灵感来源于 React Hooks，但 Vue 的实现机制不同。

本质：它不是 C++ 中的类（类主要用于面向对象编程），而是利用 Vue 的组合式 API（如 ref, reactive）来封装和复用有状态的逻辑。
规范：通常在 hooks 或 composables 文件夹下创建以 use 开头的 TS 文件（例如 useUser.ts）。
用法：在需要的地方直接 import 该函数并解构出需要的响应式变量和方法，这极大解决了 Vue 2 中 mixin 命名冲突和数据来源不清晰的问题。

4. Vue Router 路由核心

路由的本质是 URL 路径（Key）与视图组件（Value）的映射关系。

4.1 路由的两种模式

特性	History 模式 (/user)	Hash 模式 (/#/user)
外观	现代、美观，类似真实目录路径	带有 `#` 符号，稍显冗长
服务器感知	感知。刷新会向服务器请求该路径	不感知。服务器仅识别 `#` 之前的内容
后端配置	必须配置（需将所有未知路由指向 `index.html`，否则 404）	无需配置，开箱即用
底层原理	HTML5 `History API` (`pushState` 等)	监听 `hashchange` 事件

4.2 嵌套路由

在路由配置中使用 children 属性可以实现页面的嵌套。

💡 补充遗漏点：配置了嵌套路由后，必须在父组件的模板中放置 <RouterView /> 标签，子组件才会有地方渲染。

const routes = [
  {
    path: '/user',
    component: () => import('../views/User.vue'),
    children: [
      {
        path: 'profile', // 注意：子路径不要以 '/' 开头
        component: () => import('../views/UserProfile.vue')
      }
    ]
  }
]

4.3 路由传参 (Query vs Params)

方式一：Query 传参 (适用于多参数、可选参数)

类似于 GET 请求的查询字符串，参数会显示在 URL 中（如 /news?id=123）。

<RouterLink to="/news?a=aa&b=bb">新闻</RouterLink>

<RouterLink 
  :to="{
    path: '/news',
    query: {
      id: 'xxx',
      title: 'yyy'
    }
  }"
>
  新闻
</RouterLink>

方式二：Params 传参 (适用于动态路由)

URL 更加简洁（如 /news/detail/123/tech）。需要提前在路由规则中用 : 占位。

// 路由规则配置
{
  name: 'NewsDetail', // 必须配置 name
  path: '/news/detail/:id/:category',
  component: Detail
}

如果使用对象写法进行 Params 传参，必须**使用路由的 name 属性，绝对不能使用 path，否则参数会丢失！

4.4 路由的 Props 配置

为了让路由组件彻底和路由解耦（不需要在组件里写啰嗦的 route.query.xxx），可以开启 props 配置。

布尔值模式：props: true（仅适用于 params 传参）。
函数模式：props: (route) => route.query（适用于 query 传参，返回一个对象直接作为 props 传递给组件）。

4.5 路由行为控制

Replace 模式：默认情况下，路由跳转是 push 模式（留下历史记录，可以点浏览器的“后退”）。如果在标签上加上 <RouterLink replace>，则会替换当前历史记录，用户无法后退到上一页。
路由重定向 (Redirect)：在应用加载时，自动跳转到指定页面。
```
{
  path: '/',
  redirect: '/news'
}
```
编程式导航：脱离 <RouterLink>，在 JS/TS 代码中控制跳转（例如点击普通按钮、登录成功后跳转）。
```
import { useRouter } from 'vue-router'
const router = useRouter()

// 跳转到指定页面
router.push('/user/detail')
```

posted @ 2026-04-17 21:47 粉紫系超人气月兔铃仙阅读(23) 评论(0) 收藏举报

刷新页面返回顶部

Reisentyan