当前位置：首页 > news >正文

前端面经-VUE3篇（三）--vue Router（二)导航守卫、路由元信息、路由懒加载、动态路由

news 来源：原创 2025/7/13 1:21:56

一、导航守卫

vue Router 中的 导航守卫（Navigation Guards） 是一个非常重要的功能，用于在路由切换过程中，拦截、控制、检查或延迟页面跳转。

你可以理解为：

🔐 “进门前的保安”，控制哪些页面可以进入，哪些要被拦下，甚至可以临时让你等一等（如加载数据）。

1、导航守卫是什么？

导航守卫 = 在页面跳转时运行的“钩子函数”，用于：

登录验证（如没登录 → 拦住不让进）
权限判断（普通用户不能进后台）
加载数据（等异步数据加载完再跳转）
保存草稿、弹窗确认（是否离开页面）

2、导航过程中的“六大守卫钩子”

1. 全局守卫（作用于整个路由系统）

全局守卫是指：在所有路由跳转时都会触发的拦截钩子函数，你可以在这里：

检查权限（如登录验证）
记录日志
控制页面跳转流程
加载全局资源
拦截非法路径、错误跳转

1、全局守卫的分类（3种）

守卫名称	执行时机	是否需要调用 `next()`
`beforeEach`	跳转开始前	✅ 是
`beforeResolve`	所有组件守卫解析后	✅ 是
`afterEach`	跳转结束后	❌ 否（只是通知）

1.最常用的：`router.beforeEach()`

router.beforeEach((to, from, next) => {// to: 即将进入的路由// from: 当前离开的路由// next(): 控制是否放行
})

示例：登录拦截

router.beforeEach((to, from, next) => {const isLogin = !!localStorage.getItem('token')if (to.meta.requiresAuth && !isLogin) {next('/login') // 没登录跳转登录页} else {next() // 放行}
})

next() 的几种用法

写法	作用
`next()`	允许正常跳转
`next(false)`	中止导航（地址栏会回退）
`next('/login')`	重定向到其他页面
`next(new Error())`	抛出错误，触发全局错误捕获

`2.beforeResolve()`（较少使用）

router.beforeResolve((to, from, next) => {// 所有 beforeEach、组件 beforeRouteEnter、beforeEnter 都 resolve 后执行next()
})

用途：

等待所有数据加载完再显示加载动画
对所有守卫结果做最后决策

3.`afterEach()`（无 next）

router.afterEach((to, from) => {// 跳转后做事情，如：sendAnalytics(to.path)
})

不能拦截跳转，只是一个通知钩子
用于记录操作、埋点统计、结束 loading 等

2、执行顺序图解

如果你从 /login 跳到 /dashboard：

→ router.beforeEach()
→ 路由配置里的 beforeEnter（如果有）
→ 组件的 beforeRouteEnter（如果有）
→ router.beforeResolve()
→ 页面渲染
→ router.afterEach()

3、实际应用场景

场景	使用钩子
登录状态拦截	`beforeEach`
动态加载权限路由	`beforeEach`
请求加载动画	`beforeResolve`
页面跳转埋点统计	`afterEach`
首次访问重定向	`beforeEach`

2、路由独享守卫（配置在某个路由项中）

1、什么是“路由独享守卫”？

路由独享守卫是定义在某一个路由配置项中的钩子函数，只在进入该路由时触发。

📌 区别于全局守卫，它不会影响其他页面，适合只对特定路由做控制。

语法格式

{path: '/admin',component: AdminPage,beforeEnter(to, from, next) {// 只会在进入 /admin 时触发if (isAdmin()) {next() // 放行} else {next('/no-access') // 重定向}}
}

2、典型用途场景

场景	示例
后台路由权限拦截	`/admin` 只有管理员能进
特定页面加载前校验数据	`/editor` 页面检查草稿是否存在
临时页面的跳转控制	`/event/:id` 检查活动是否开启

3、和全局守卫的区别

点	全局守卫	路由独享守卫
触发时机	所有路由跳转都触发	只在进入某个特定页面时触发
代码位置	路由实例中	单个路由配置项中
使用场景	登录检查、全站控制	单页权限、页面特殊逻辑

示例：后台权限验证

const routes = [{path: '/admin',component: AdminView,beforeEnter(to, from, next) {const user = getUserInfo()if (user.role === 'admin') {next()} else {next('/403')}}}
]

4、注意事项

如果你既使用了全局守卫又用了路由独享守卫，它们是串联执行的。
路由独享守卫在组件还没创建时就执行，因此不能访问组件实例 this。

3. 组件内守卫（定义在组件中）

1、什么是组件内守卫？

组件内守卫是直接定义在组件内部的路由钩子函数，用于在“进入当前组件”、“更新当前组件参数”或“离开当前组件”时执行逻辑。

它和全局守卫 / 路由独享守卫相比，更适用于组件内部逻辑控制，如弹窗提示、数据加载、组件状态管理等。

2、组件内三种守卫（使用时机）

守卫名	触发时机	常见用途
`beforeRouteEnter`	即将进入组件前（组件还未创建）	判断是否允许进入、等数据加载完
`beforeRouteUpdate`	同组件但路由参数变化时	响应式更新组件内容
`beforeRouteLeave`	离开当前组件时	弹窗确认、保存草稿

示例讲解

1. `beforeRouteEnter(to, from, next)`

📌 组件还没创建，所以你不能访问 this！

export default {beforeRouteEnter(to, from, next) {// 在进入该组件前执行console.log('准备进入这个组件')// 如果你需要访问组件实例，可以这样写：next(vm => {console.log('组件实例是：', vm)})}
}

2. `beforeRouteUpdate(to, from, next)`

📌 组件已经渲染，只是参数变了

常用于如 /user/1 → /user/2 的这种路径变化

export default {beforeRouteUpdate(to, from, next) {// 当 :id 参数变化时触发this.userId = to.params.idthis.fetchData()next()}
}

`3.beforeRouteLeave(to, from, next)`

📌 离开当前组件前触发

常用于弹窗确认：

export default {beforeRouteLeave(to, from, next) {if (this.formChanged) {const answer = window.confirm('你有未保存的更改，确定离开？')if (!answer) return next(false)}next() // 放行}
}

3、注意事项

beforeRouteEnter 无法访问 this，必须用 next(vm => {...}) 才能访问组件实例。
如果你使用的是 <script setup>，这些守卫要通过 onBeforeRouteLeave() 等组合式 API 来注册。

3、守卫执行顺序图解

假设你从 /a → /b，执行顺序是：

1. 全局 beforeEach
2. 路由 beforeEnter
3. 组件 beforeRouteLeave（离开 a）
4. 组件 beforeRouteEnter（进入 b）
5. 全局 beforeResolve
6. 页面渲染
7. 全局 afterEach

4、常见坑点

错误用法	正确说明
`next()` 忘记写	会导致跳转永远卡住
`beforeRouteEnter` 中访问 `this`	不行！因为组件还没被创建，用 `next(vm => {...})`
`beforeRouteUpdate` 不写	跳转到相同组件（比如 `user/1` → `user/2`）时，页面不会更新
异步未处理错误	加 try/catch，或者重定向到错误页

二、路由元信息

Vue Router 中的路由元信息（meta）是一个非常强大但简单的功能，常用于在路由配置中添加额外的自定义数据，比如：

是否需要登录权限
当前页面的标题
页面缓存控制
菜单显示图标
动态路由权限判断

1、什么是路由元信息？

meta 是路由对象中的一个可选字段，用于存储自定义的附加信息，Vue Router 不会主动使用，但你可以在导航守卫、组件中等地方访问并利用它。

语法结构示例

{path: '/admin',component: AdminView,meta: {requiresAuth: true,title: '管理后台',icon: 'admin-icon',cache: true}
}

这段配置的含义就是：

访问 /admin 时，需要登录
页面标题是“管理后台”
菜单显示图标为 admin-icon
页面可以缓存

2、怎么访问 meta？

你可以通过 route.meta 来访问元信息：

1. 在全局导航守卫中：
router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !isLoggedIn()) {next('/login')} else {next()}
})2. 在组件中访问：
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.meta.title) // 页面标题

3、典型应用场景（非常实用）

应用场景	用法示例
登录权限控制	`meta: { requiresAuth: true }`
页面标题设置	`meta: { title: '首页' }`
动态菜单渲染	`meta: { icon: 'home', hidden: false }`
缓存控制	`meta: { cache: true }` 配合 keep-alive
用户角色权限	`meta: { roles: ['admin', 'editor'] }`
是否展示标签页	`meta: { tag: true }`（多标签页路由）

4、注意事项

项目	说明
`meta` 是用户自定义的	Vue Router 不会解释它，你自己怎么用都行
子路由也可以有 meta	如果没有，你可以继承父路由的 meta
需要在组件或守卫中访问 route 对象	使用 `useRoute()` 获取当前路由信息

meta 是 Vue Router 路由配置中的“万能自定义字段”，你可以往里面塞权限标记、页面标题、缓存控制、菜单信息等任意逻辑，再通过路由守卫或组件动态处理。

三、 `<RouterView>` 插槽

RouterView 是 Vue Router 提供的内置组件，专门用来渲染“命中的子路由组件”。
而它的插槽（slot）机制，让我们可以更灵活地控制它所渲染的内容。

从 Vue Router 4 开始，<RouterView> 支持默认插槽和作用域插槽。

1、使用插槽做什么？

通过插槽你可以：

用途	说明
✨ 页面过渡动画	为切换的路由组件加动画
🌀 加载指示器	在组件未加载前显示 loading
🎯 动态包装	自定义如何渲染子组件，例如加布局、卡片框等

2、插槽语法

<RouterView v-slot="{ Component, route }"><!-- 自定义展示方式 -->
</RouterView>变量	说明
Component	当前要渲染的子路由组件
route	当前激活的路由对象（等同于 useRoute()）

示例：为路由组件加过渡动画

<RouterView v-slot="{ Component }"><Transition name="fade"><component :is="Component" /></Transition>
</RouterView>
📌 解释：你接管了 RouterView 默认渲染行为自己通过 <component :is="Component" /> 渲染它可插入 <Transition> 包裹来加动画

3、使用场景总结

场景	解决问题
组件加载前展示 loading	配合 `<Suspense>`
切换页面时添加过渡动画	用 `<Transition>`
自定义布局结构包装组件	外层加卡片/容器等
统一处理错误提示	在外层判断并渲染 fallba

三、路由懒加载

路由懒加载（Route Lazy Loading） 是 Vue Router 中的一个优化技巧，主要目的是：

✅ 将路由组件按需加载，而不是一次性全部加载，从而提升首页加载速度、减少初始包体积、加快页面响应。

1、什么是“懒加载”？

懒加载（Lazy Load）就是在用户访问某个路由时才去加载对应的组件代码。

不是在一开始加载整个应用时就加载所有路由页面，而是需要时再加载、用完即用。

2、为什么需要懒加载？

不懒加载时会发生什么？

项目中所有页面组件在第一次打开应用时全部加载
首屏加载时间变慢（特别是页面很多时）
用户可能只访问其中某几个页面，却加载了所有组件

3、懒加载的实现方式

传统方式（同步加载）

import Home from '@/views/Home.vue'const routes = [{ path: '/', component: Home }
]缺点：Home.vue 会在页面初始化时就被加载

推荐方式：使用 `import()` 动态导入

const Home = () => import('@/views/Home.vue')const routes = [{ path: '/', component: Home }
]

这个语法的核心：

import() 返回一个 Promise
Vue 会把这个组件单独打包成一个 懒加载 chunk
当你访问 / 时，它才会发起网络请求下载该页面代码

4、懒加载适合什么项目？

项目类型	是否建议使用懒加载
小型 SPA，页面少	不强制，可选
多页面、功能复杂	✅ 强烈建议懒加载
管理系统、CMS、商城	✅ 一定要懒加载
首屏要极快响应	✅ 可只加载核心页面，其它懒加载

四、动态路由

1、什么是动态路由？

动态路由是指：你可以在路由路径中定义“参数变量”，从而匹配不同的 URL，渲染相同的组件但显示不同的内容。

基础语法

路由配置：

{path: '/user/:id',component: UserDetail
}
:id 是一个动态路径参数访问 /user/1、/user/2 会匹配同一个路由，但参数不同

在组件中获取动态参数

在 <script setup> 中：

import { useRoute } from 'vue-router'const route = useRoute()
console.log(route.params.id) // 输出当前的用户 ID
你可以用它去请求对应用户的数据：
const res = await fetch(`/api/user/${route.params.id}`)

动态参数更新时自动响应

问题：

访问 /user/1 后，再跳转 /user/2，组件不会重新创建，这时你要用：

import { onBeforeRouteUpdate, useRoute } from 'vue-router'const route = useRoute()onBeforeRouteUpdate((to, from, next) => {// 监听参数变化fetchData(to.params.id)next()
})

或者使用 <watch> 监听 route 变化。

props 配合动态参数（推荐做法）

路由配置：
{path: '/user/:id',component: UserDetail,props: true
}
✅ 组件中直接用 props 接收参数：<script setup>
const props = defineProps(['id'])
</script>
这样你无需手动解析 useRoute()，更干净、易测试。

2、什么是动态路由添加？

通俗解释：

动态路由添加就是：在运行时动态注册新的路由，而不是一开始就写死在 routes 里。

常见于以下场景：

登录后根据权限动态添加路由
加载某个模块时再注册其页面路由
插件/微前端中按需注册子应用路由

动态添加路由的基本方法：router.addRoute()

router.addRoute({ path: '/about', component: About })
这样会将 /about 的路由 添加进当前路由系统中。

🧠 但注意：
如果你当前已经在 /about 页面上了，它会继续显示之前的匹配结果，比如 /:articleName，因为 Vue Router 只在切换路由时重新匹配！

解决办法：

// 添加新路由
router.addRoute({ path: '/about', component: About })
// 替换当前路径以强制重新匹配
router.replace(router.currentRoute.value.fullPath)这样 Vue Router 才会重新匹配新添加的 /about 路由，并正确渲染 About 组件。

3、在导航守卫中动态添加路由

动态加载路由的同时判断是否已有该路由，并触发重定向。

router.beforeEach(to => {if (!hasNecessaryRoute(to)) {router.addRoute(generateRoute(to))   // 添加路由return to.fullPath                   // 触发重定向}
})

📌 解释：

hasNecessaryRoute()：判断当前要访问的路由是否已经注册
如果没有 → 添加 → 返回 to.fullPath 触发跳转（类似 next(to.fullPath)）

🔁 必须小心处理递归添加/跳转，以防无限重定向

4、如何删除路由？

✅ 方式一：名字相同会覆盖

router.addRoute({ name: 'about', path: '/about', component: About })
router.addRoute({ name: 'about', path: '/other', component: Other })
// 原来的 'about' 路由会被删除，新的替代

方式二：使用 `addRoute()` 返回的函数

const remove = router.addRoute({ path: '/settings', component: Settings })
remove() // 取消注册该路由
适合用于组件挂载时注册、卸载时移除。

方式三：显式调用 `router.removeRoute(name)`

router.removeRoute('about')
⚠️ 只能删除命名路由

5、动态添加嵌套路由（children）

// 添加父路由
router.addRoute({ name: 'admin', path: '/admin', component: Admin })
// 向 admin 路由添加子路由
router.addRoute('admin', { path: 'settings', component: AdminSettings })
等价于：
{name: 'admin',path: '/admin',component: Admin,children: [{ path: 'settings', component: AdminSettings }]
}

动态嵌套路由常用于：

模块懒加载时
子模块按需注册

6、查看和判断当前路由表

Vue Router 提供两个方法：

方法	功能
`router.hasRoute(name)`	判断某个命名路由是否存在
`router.getRoutes()`	获取所有当前注册的路由（包括

示例

// 添加
if (!router.hasRoute('dashboard')) {router.addRoute({ name: 'dashboard', path: '/dashboard', component: Dashboard })
}// 删除
if (router.hasRoute('dashboard')) {router.removeRoute('dashboard')
}

7、总结

动态路由让你可以在运行时控制哪些页面存在、哪些功能可访问，是构建权限控制、模块懒加载、大型系统菜单的关键机制。配合 addRoute()、removeRoute()、router.replace() 使用可以灵活操作整个路由系统。

前端面经-VUE3篇（三）--vue Router（二)导航守卫、路由元信息、路由懒加载、动态路由

一、导航守卫 vue Router 中的导航守卫（Navigation Guards） 是一个非常重要的功能，用于在路由切换过程中，拦截、控制、检查或延迟页面跳转。你可以理解为： 🔐 “进门前的保安”，控制哪些页面…...

编程日记 2025/7/13 1:21:56

RTX-3090 Qwen3-8B Dify RAG环境搭建

RTX-3090 Qwen3-8B Dify RAG环境搭建一、环境配置二、操作步骤1、创建容器2、下载`Qwen3-8B`和embedding模型3、安装`transformers`4、安装`vllm`5、安装`flash-attention`6、启动兼容OpenAI API的服务1、方案一:启动`vllm`服务【不支持多任务】2、方案二:Flask和PyTorch实现的…...

编程日记 2025/6/29 7:47:42

Circular Plot系列(三)：【视频教程】复现NCS图表之高大上的单细胞UMAP环形图

高端复杂的UMAP复现： 这又是一个高大上且炫酷的单细胞UMAP图，展示的信息很多，有大类细胞和亚群，以及marker基因和cell count信息，还可以增加其他的分组信息等等。没错，看这个图就是circlize一层层画的。我们…...

编程日记 2025/7/13 0:27:41

MCP智能体多Agent协作系统设计（Multi-Agent Cooperation）

目录 🚀 MCP智能体多Agent协作系统设计（Multi-Agent Cooperation） 🌟 为什么需要多Agent协作？ 🧠 多Agent协作系统架构设计 🛠️ 1. 构建基础智能体基类（Agent Base）…...

编程日记 2025/7/13 0:30:18

栈Stack

一栈:先进后出一种特殊的线性表，其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶，另一端称为栈底。栈中的数据元素遵守后进先出LIFO（Last In First Out）的原则。 Stack<Integer> sta…...

编程日记 2025/6/29 7:29:30

HTML01：HTML基本结构

HTML基本结构 <html> <head><meta charset"UTF-8"><title>我的第一个网页</title> </head> <body>我的第一个网页 </body> </html><body、</body等成对的标签，分别叫开发标签和闭合标签单独…...

编程日记 2025/7/13 0:17:37

QT聊天项目DAY07

1.Win配置和使用GRPC 1.1 克隆GRPC库克隆GRPC git clone -b v1.34.0 https://gitee.com/mirrors/grpc-framework.git 查看Git有没有安装没有安装 1.1.1 安装Git https://git-scm.com/ 一路next 添加Git的路径到系统环境变量下我这次没用管理员权限，并且也没…...

编程日记 2025/7/13 0:30:18

2025年PMP 学习三

4.2制定项目管理计划 4. 项目管理计划 - 内容（输出） 项目目标的制定原因： 3个基准（范围基准、进度基准、成本基准） 子管理计划：范围、需求、进度、成本、质量、资源、沟通、风险、采购等管理计划&#xf…...

编程日记 2025/7/13 0:01:12

软考-软件设计师中级备考 10、文件管理、设备管理

一、文件管理 1、文件目录文件控制块（FCB）：是操作系统为管理文件而设置的数据结构，包含了文件的基本信息（如文件名、文件大小、文件类型等）、存取控制信息（如文件所有者的权限、其他用户的权…...

编程日记 2025/7/13 0:11:03

Linux环境下的进程创建-fork函数的使用，进程退出exit和_exit的区别，以及进程等待waitpid和status数据的提取方法

目录一、进程创建 1.fork函数 1）进程调用fork函数是如何创建子进程的 2）代码示范 2.写时拷贝二、进程退出 1.退出码 1）什么是退出码？ 2）为什么要有退出码？ 3）退出码是怎么做到的？ …...

编程日记 2025/7/13 1:13:43

【数据结构与算法】常见排序算法详解（C++实现）

目录一、排序的基本概念二、插入排序 2.1 直接插入排序 2.2 折半插入排序 2.3 希尔排序三、交换排序 3.1 冒泡排序 3.2 快速排序四、选择排序 4.1 简单选择排序 4.2 堆排序五、归并排序六、基数排序七、计数排序结语一、排序的基本概念排序就是重新…...

编程日记 2025/7/13 0:21:03

STM32GPIO输入实战-按键key模板及移植

STM32GPIO输入实战-按键key模板及移植一，按键模板展示二，按键模板逻辑1，准备工作：头文件与全局变量2，读取硬件状态：key_read_raw()3,核心处理：key_process_simple() 的四行代码三，…...

编程日记 2025/7/13 0:00:25

LeetCode 1128.等价多米诺骨牌对的数量：计数

【LetMeFly】1128.等价多米诺骨牌对的数量：计数力扣题目链接：https://leetcode.cn/problems/number-of-equivalent-domino-pairs/ 给你一组多米诺骨牌 dominoes 。形式上，dominoes[i] [a, b] 与 dominoes[j] [c, d] 等价当且仅当 (a …...

编程日记 2025/7/13 0:14:05

Spring MVC设计与实现

DispatcherServlet的初始化与请求处理流程初始化阶段 Servlet 生命周期触发：当 Web 容器（如 Tomcat）启动时，根据注解/配置，DispatcherServlet 的 init() 方法被调用。初始化 WebApplicationContext 根 WebApplicat…...

编程日记 2025/7/13 0:40:44

日语学习-日语知识点小记-进阶-JLPT-N1阶段（1）：语法单词

日语学习-日语知识点小记-进阶-JLPT-N1阶段（1）：语法单词 1、前言（1）情况说明（2）工程师的信仰（3）高级语法N1语法和难点一、N1语法学习内容（高级语法&#xff…...

编程日记 2025/7/12 23:42:48

stm32week14

stm32学习十.GPIO 2.基本结构基本结构： F1与其它的的最大区别是上下拉电阻的位置施密特触发器是一种整形电路，可以将非标准方波，整形成方波图中MOS管的输出规则： 3.8中工作模式 ①输入浮空： 上下拉电阻均不工…...

编程日记 2025/6/29 5:37:12

WPF中Binding

绑定ViewModel中的数据添加数据上下文方法一：在XAML中添加 <Window.DataContext><local:MainWindowViewModel /> </Window.DataContext>方法二：在界面层的cs文件中添加 this.DataContext new MainWindowViewModel();绑定 publ…...

编程日记 2025/6/29 7:36:07

Google Agent space时代，浅谈Agent2Agent (A2A) 协议和挑战！

如果说去年Google Cloud大会大家还在数“AI”这个词被提了多少次，那么今年，绝对是“Agent”的主场！开发者主题演讲几乎被它“刷屏”，展区的许多 Demo 也都号称是 Agent 应用。但我得诚实地说，大会现场关于 Agents 的 …...

编程日记 2025/7/8 14:28:25

爬虫的应用

在自然语言处理（NLP）领域，文本数据的预处理是至关重要的基础环节。它如同工匠雕琢璞玉前的打磨工作，直接影响后续模型分析与挖掘的效果。本文将基于 Python，以电商平台的差评和优质评价文本数据为例，详细展…...

编程日记 2025/6/29 8:11:18

Day 41 题目描述做法 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode left, TreeNode right…...

编程日记 2025/6/29 6:28:38

Java后端开发day40--异常File

（以下内容全部来自上述课程） 异常异常：异常就是代表程序出现的问题 1. 异常的分类 1.1 Error 代表的是系统级别的错误（属于严重问题） 系统一旦出现问题，sun公司会把这些错误封装成Error对象。 Error…...

编程日记 2025/6/29 8:06:24

集成算法学习

集成算法通过组合多个弱学习器提升模型性能，以下是核心内容详解： 一、核心思想 - 组合优势：结合多个简单模型（如决策树），通过“少数服从多数”或“加权平均”等策略，降低方差、偏差或过拟合风险…...

编程日记 2025/6/29 8:06:36

工业认知智能：从数据分析到知识创造

工业认知智能：从数据分析到知识创造引言当前制造业面临的知识管理困境令人震惊：68%的工艺知识存储于老员工头脑中，30%的企业因知识传承断层导致质量事故。麦肯锡研究显示，应用认知智能技术的企业，其工艺创新速度提升3-5倍。本文将系统阐述工业认知智能的"感知-理…...

编程日记 2025/6/29 7:36:20

8.1 Python+Docker+企业微信集成实战：自动化报告生成与CI/CD部署全攻略

Python+Docker+企业微信集成实战：自动化报告生成与CI/CD部署全攻略关键词：PDF报告生成, Word文档自动化, 企业微信集成, Docker容器化, CI/CD流水线 1. 多格式报告生成实战通过扩展报告输出格式，满足不同用户的文档需求。我们使用Python生态的成熟库实现PDF/Word生成，并…...

编程日记 2025/6/29 5:11:13

25.5.4数据结构|哈夫曼树学习笔记

知识点前言一、搞清楚概念 ●权：___________ ●带权路径长度：__________ WPL所有的叶子结点的权值*路径长度之和 ●前缀编码：____________ 二、构造哈夫曼树 n个带权值的结点，构造哈夫曼树算法： 1、转化成n棵树组成的…...

编程日记 2025/6/29 5:11:02

统计学中的p值是什么？怎么使用？

李升伟整理在统计学中，p值（p-value）是帮助研究者判断假设检验结果是否具有统计显著性的重要指标。以下是关于p值的详细解释和使用方法： 1. p值的定义 p值表示在原假设（H0）为真的情况下，观察…...

编程日记 2025/6/29 6:50:45

22：一维码与二维码区别

一维码（条形码） 一维条码即指条码条和空的排列规则，常用的一维码的码制包括：EAN码、39码、交叉25码、UPC码、128码、93码，ISBN码，及Codabar（库德巴码）等。条码是由一组规则排列的条…...

编程日记 2025/6/29 8:33:51

Java学习手册：SQL 优化技巧

一、SQL 查询优化选择合适的索引列 ：索引可以显著提高查询速度，但需要选择合适的列来创建索引。通常，对于频繁作为查询条件的列、连接操作的列以及排序或分组操作的列，应该考虑创建索引。例如，在一个订单表中&#xf…...

编程日记 2025/6/29 3:53:49

《Vue3学习手记8》

vue3中的一些API shallowRef ( ) 和shallowReactive ( ) shallowRef (浅层响应式) 1.作用:创建一个响应式数据，但只对顶层属性进行响应式处理。 2.用法: const originalref(...) const original2shallowRef(original) 3.特点:只跟踪引用值的变化，不关心…...

编程日记 2025/7/12 20:48:54

平衡二叉搜索树模拟实现1-------AVL树(插入,删除,查找)

本章目标 1.AVL树的概念 2.AVL树的模拟实现 1.AVL树的概念 1.AVL树是最先被发明的平衡二叉搜索树,AVL树是一颗空树或者具有以下的性质它的左右子树都是AVL树,并且左右高度差不超过1,AVL树是一颗高度平衡二叉搜索树,通过高度差去控制平衡 2.为什么高度差是1? 当结点个数为8…...

编程日记 2025/7/10 15:35:05

运算放大器的主要技术指标

运放（运算放大器）是一种基础电子器件，具有输入阻抗高、开环放大倍数大、输入端电流小、同相端与反相端电压几乎相等等特点。在选型时，需要考虑技术指标如输入失调电压、输入失调电压漂移、输入失调电流、共模抑制比、压摆率、建立…...

编程日记 2025/7/12 17:15:31

51单片机入门教程——每个音符对应的重装载值

前言本教程基于B站江协科技课程进行个人学习整理，专为拥有C语言基础的零基础入门51单片机新手设计。既帮助解决因时间差导致的设备迭代调试难题，也助力新手快速掌握51单片机核心知识，实现从C语言理论到单片机实践应用的高效过渡。...

编程日记 2025/7/9 21:37:03

新一代智能座舱娱乐系统软件架构设计文档

一文档概述本文档描述了基于Android系统与多模态大模型融合的新一代智能座舱娱乐系统的软件架构设计。该系统将通过深度学习的个性化适配、多模态感知融合和持续自进化能力，重新定义人车交互体验。二整体架构设计 2.1 分层架构视图系统采用五层垂直架构与三…...

编程日记 2025/7/12 23:26:44

深度优先搜索（DFS）与广度优先搜索（BFS）：图与树遍历的两大利器

深度优先搜索（DFS）与广度优先搜索（BFS）：图与树遍历的两大利器在数据结构与算法的世界中，深度优先搜索（DFS）和广度优先搜索（BFS）是两种非常经典的遍历算法。…...

编程日记 2025/7/12 18:16:18

比较 TensorFlow 和 PyTorch

TensorFlow和PyTorch是深度学习领域中两个非常流行的开源机器学习框架，下面为你详细介绍。 1. 历史与背景 TensorFlow：由Google开发和维护，于2015年开源。因其强大的生产能力和广泛的工具支持，在工业界得到了广泛应用。PyTorch&…...

编程日记 2025/7/12 21:46:35

jeecg查询指定时间

jeecg查询指定时间 ApiOperation(value"请假表-分页列表查询", notes"请假表-分页列表查询")GetMapping(value "/list")public Result<IPage<MlLeaveRequest>> queryPageList(MlLeaveRequest mlLeaveRequest,RequestParam(name&qu…...

编程日记 2025/7/12 19:06:11

无人机视觉：连接像素与现实世界 —— 像素与GPS坐标双向转换指南

在无人机航拍应用中，一个核心的需求是将图像上的某个点与现实世界中的地理位置精确对应起来。无论是目标跟踪、地图测绘还是农情监测，理解图像像素与其对应的经纬度（GPS坐标）之间的关系至关重要。本文将详细介绍如何实现单个像素坐…...

编程日记 2025/7/12 13:36:25

php study 网站出现404 - Page Not Found 未找到

最近在用php study搭建本地网站时，出现了404 - Page Not Found 未找到的情况，解决方式如下： 第一种：在wp 后台固定链接设置中修改链接形式第二种:没有安装伪静态! 小皮面板中设置--配置文件--编辑你所搭建的网站在红色框框处…...

编程日记 2025/7/12 0:40:15

互联网大厂Java求职面试：核心技术点深度解析

互联网大厂Java求职面试：核心技术点深度解析在互联网大厂的Java岗位面试中，技术总监级别的面试官通常会从实际业务场景出发，层层深入地考察候选人的技术能力。本文通过一个严肃专业的技术总监与搞笑但有技术潜力的程序员郑薪苦之间的互动对…...

编程日记 2025/7/12 2:11:03

【Java idea配置】

IntelliJ IDEA创建类时自动生成注释 /** * program: ${PROJECT_NAME} * * since: jdk1.8 * * description: ${description} * * author: ${USER} * * create: ${YEAR}-${MONTH}-${DAY} ${HOUR}:${MINUTE} **/自动导入和自动移除无用导入 idea彩色日志不生效调试日志输出在…...

编程日记 2025/7/9 23:21:17

[GESP202503 四级] 二阶矩阵c++

题目描述小 A 有一个 n 行 m 列的矩阵 A。小 A 认为一个 22 的矩阵 D 是好的，当且仅当。其中表示矩阵 D 的第 i 行第 j 列的元素。小 A 想知道 A 中有多少个好的子矩阵。输入第一行，两个正整数 n,m。接下来 n 行，每行 m 个整数…...

编程日记 2025/7/12 16:18:07

PyQt5基本介绍

PyQt5是基于Digia公司强大图形框架Qt5的python接口，由一组python模块构成。是一个用于创建桌面应用程序的Python库，它是Qt图形用户界面工具包的Python绑定。 Qt是一个跨平台的C库，提供了一套丰富的工具和功能，用于开发图形用户界…...

编程日记 2025/6/29 8:16:27

Spring AI 实战：第十章、Spring AI RAG之博学多才

引言：从“博闻强记”到“博学多才” 在人工智能的发展历程中，大语言模型（LLM）已经展现了惊人的“博闻强记”能力——它们能写诗、编码、解答常识问题，甚至模拟人类对话。然而，当面对专业领域知识或实时更新的信息时，这些模型往往会暴露其局限性：要么“一本正经地胡说八…...

编程日记 2025/7/11 23:53:03

Runnable 组件生命周期监听器与使用场景

Runnable 生命周期监听器 1.1 监听机制演进在 LangChain 框架中，Runnable 组件提供两种监控方案： 传统模式：通过 config callbacks 参数传递回调配置增强模式：使用 with_listeners() 方法实现生命周期订阅 …...

编程日记 2025/7/12 18:47:16

五、shell脚本--函数与脚本结构：搭积木，让脚本更有条理

随着我们的脚本越来越长、越来越复杂，直接把所有命令堆在一起会变得难以阅读和维护。这时候，函数 (Function) 就派上大用场了！ 函数就像一个可以重复使用的代码块，你可以给它起个名字，然后在脚本的任何地方通过名字来…...

编程日记 2025/7/12 18:05:13

单调栈与单调队列（c艹）、可视化Qt？

单调栈和单调队列的区别在于 ChatGLM 单调栈和单调队列都是数据结构中用于处理序列问题的工具，它们在处理问题时具有不同的特性和应用场景。以下是单调栈和单调队列的主要区别： 定义： 单调栈：是一种特殊的栈，其中的元…...

编程日记 2025/7/12 21:42:11

哈夫曼树和哈夫曼编码

哈夫曼编码一般用来对字符串进行编码格式的表示。其中要克服的最大问题，莫过于就是一串由0或者1组成的编码，你无法区分哪些01组成的编码部分是属于哪些字符的，因此哈夫曼编码的出现解决了这个问题。在介绍哈夫曼编码之前，先介绍…...

编程日记 2025/7/10 4:02:34

基于 AI 的人像修复与编辑技术：CompleteMe 系统的研究与应用

概述加利福尼亚大学默塞德分校与 Adobe 的新合作在人像补全领域取得了突破性进展——人像补全是一项备受关注的任务，旨在“揭示”人像中被遮挡或隐藏的部分，可用于虚拟试穿、动画制作和照片编辑等场景。除了修复损坏的图像或根据用户意愿更改图像外&a…...

编程日记 2025/6/29 5:37:54

spring 使用FactoryBean注入bean

spring 使用FactoryBean注入bean 1、介绍通常是ApplicationContext，就是IOC容器，ApplicationContext是BeanFactory的实现类，是spring最核心的接口。用getBean来加载bean。BeanFactory相当于是IOC的基础类。而FactoryBean是另一个东西&a…...

编程日记 2025/6/29 7:18:20

AI 编程日报 · 2025 年 5 月 04 日｜GitHub Copilot Agent 模式发布，Ultralytics 优化训练效率

1、OpenAI 确认 GPT-4o“谄媚”个性更新已完全回滚 OpenAI 官方已确认，先前推送的一项旨在改进 GPT-4o 模型个性的更新已被完全撤销。该更新最初目标是提升模型的智能与个性，使其交互更直观有效，但实际效果却导致模型表现出过度“谄媚”和“…...

编程日记 2025/7/12 22:28:47

一、导航守卫

1、导航守卫是什么？

2、导航过程中的“六大守卫钩子”

1. 全局守卫（作用于整个路由系统）

1、 全局守卫的分类（3种）

1.最常用的：router.beforeEach()

2.beforeResolve()（较少使用）

3.afterEach()（无 next）

2、执行顺序图解

3、实际应用场景

2、 路由独享守卫（配置在某个路由项中）

1、什么是“路由独享守卫”？

2、典型用途场景

3、和全局守卫的区别

4、注意事项

3. 组件内守卫（定义在组件中）

1、什么是组件内守卫？

2、组件内三种守卫（使用时机）

1. beforeRouteEnter(to, from, next)

2. beforeRouteUpdate(to, from, next)

3.beforeRouteLeave(to, from, next)

3、注意事项

3、守卫执行顺序图解

4、常见坑点

二、路由元信息

1、什么是路由元信息？

2、 怎么访问 meta？

3、典型应用场景（非常实用）

4、注意事项

三、 <RouterView> 插槽

1、使用插槽做什么？

2、 插槽语法

3、使用场景总结

三、路由懒加载

1、什么是“懒加载”？

2、为什么需要懒加载？

3、懒加载的实现方式

传统方式（同步加载）

推荐方式：使用 import() 动态导入

4、懒加载适合什么项目？

四、动态路由

1、什么是动态路由？

基础语法

路由配置：

在组件中获取动态参数

props 配合动态参数（推荐做法）

2、什么是动态路由添加？

3、在导航守卫中动态添加路由

4、如何删除路由？

✅ 方式一：名字相同会覆盖

方式二：使用 addRoute() 返回的函数

方式三：显式调用 router.removeRoute(name)

5、动态添加嵌套路由（children）

6、查看和判断当前路由表

7、总结

相关文章：

1、全局守卫的分类（3种）

1.最常用的：`router.beforeEach()`

`2.beforeResolve()`（较少使用）

3.`afterEach()`（无 next）

2、路由独享守卫（配置在某个路由项中）

1. `beforeRouteEnter(to, from, next)`

2. `beforeRouteUpdate(to, from, next)`

`3.beforeRouteLeave(to, from, next)`

2、怎么访问 meta？

三、 `<RouterView>` 插槽

2、插槽语法

推荐方式：使用 `import()` 动态导入

方式二：使用 `addRoute()` 返回的函数

方式三：显式调用 `router.removeRoute(name)`