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

实现:切换页面切换标题,扩展 vue-router 的类型

布局容器-页面标题

网址:https://router.vuejs.org/zh/guide/advanced/meta

给每一个路由添加 元信息 数据
router/index.ts

const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{ path: '/login', component: () => import('@/views/Login/index.vue'), meta: { title: '登录' } },{path: '/',component: () => import('@/views/Layout/index.vue'),redirect: '/home',children: [{path: '/home',component: () => import('@/views/Home/index.vue'),meta: { title: '首页' }},{path: '/notify',component: () => import('@/views/Notify/index.vue'),meta: { title: '消息通知' }},{path: '/user',component: () => import('@/views/User/index.vue'),meta: { title: '个人中心' }}]}]
})
//后置导航
//切换路由设置标题
router.afterEach((to) => {document.title = `${to.meta.title || ''}-优医问诊`
})

扩展元信息类型 types/vue-router.d.ts

import 'vue-router'
declare module 'vue-router' {// 扩展 元信息类型interface RouteMeta {// 标题title?: string}
}

在这里插入图片描述

相关文章:

实现:切换页面切换标题,扩展 vue-router 的类型

布局容器-页面标题 网址:https://router.vuejs.org/zh/guide/advanced/meta 给每一个路由添加 元信息 数据 router/index.ts const router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{ path: /login, component: () > im…...

已通过考试和认证注册以及后续计划表

已通过考试和认证注册以及后续计划表 软考 - 计算机技术与软件专业技术资格(水平)考试信息系统集成及服务项目管理人员工程类考试计划你关注的证书样子 软考 - 计算机技术与软件专业技术资格(水平)考试 高级 信息系统项目管理师&…...

开源计算机视觉库OpenCV详解

目录 1、概述 2、OpenCV详细介绍 2.1、OpenCV的起源 2.2、OpenCV开发语言 2.3、OpenCV的应用领域 3、OpenCV模块划分 4、OpenCV源码文件结构 4.1、根目录介绍 4.2、常用模块介绍 4.3、CUDA加速模块 5、OpenCV配置以及Visual Studio使用OpenCV 6、关于Lena图片 7、…...

使用pytorch查看中间层特征矩阵以及卷积核参数

这篇是我对哔哩哔哩up主 霹雳吧啦Wz 的视频的文字版学习笔记 感谢他对知识的分享 1和4是之前讲过的alexnet和resnet模型 2是分析中间层特征矩阵的脚本 3是查看卷积核参数的脚本 1设置预处理方法 和图像训练的时候用的预处理方法保持一致 2实例化模型 3载入之前的模型参数 4载入…...

HarmonyOS4.0从零开始的开发教程09页签切换

HarmonyOS(七)页签切换 List组件和Grid组件的使用 Tabs组件的使用 概述 在我们常用的应用中,经常会有视图内容切换的场景,来展示更加丰富的内容。比如下面这个页面,点击底部的页签的选项,可以实现“首页…...

大电流H桥电机驱动电路的设计与解析(包括自举电路的讲解,以IR2104+LR7843为例)

大电流H桥电机驱动电路的设计与解析(包括自举电路的讲解,以IR2104LR7843为例) 电机驱动板主要采用两种驱动芯片,一种是全桥驱动(如:HIP4082),一种是半桥驱动(如&#xff…...

windows11 windows 11 (win11 win 11) 怎么安装 Python3 ? numpy? sounddevice? 声音信号处理库?

首先确认要安装的 sounddevice 库,链接:https://python-sounddevice.readthedocs.io/en/0.4.6/ 根据文档,可知最新的 sounddevice 版本是 0.4.6 进入安装页面查看,发现 Newest sounddevice 可以使用 pip 安装,如下图…...

git如何配置多个远程仓库,并且进行切换

一、配置多个远程仓库并进行切换&#xff0c;请按照以下步骤进行操作&#xff1a; 打开命令行终端&#xff0c;并进入您的 Git 仓库所在的目录。添加第一个远程仓库&#xff0c;使用以下命令&#xff1a;git remote add origin <第一个远程仓库的 URL>这里将远程仓库命名…...

计算机存储单位 + 程序编译过程

C语言的编译过程 计算机存储单位 头文件包含的两种方式 使用 C/C 程序常用的IDE 常用的C语言编译器&#xff1a; 在选择编译器时&#xff0c;需考虑平台兼容性、性能优化、调试工具和开发人员的个人偏好等因素。 详细教程可转 爱编程的大丙...

vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)

目录 一、什么是Vue路由导航守卫&#xff1f; 二、全局守卫 1、beforeEach 下面是一个beforeEach的示例代码&#xff1a; 2、beforeResolve 下面是一个beforeResolve的示例代码&#xff1a; 3、afterEach 下面是一个afterEach的示例代码&#xff1a; 三、路由独享守卫…...

单片机双机通信控制跑马灯

实验要求 两个单片机各驱动8个LED灯&#xff0c;构成两个跑马灯&#xff0c;要求甲单片机LED的点亮方式是从上至下&#xff0c;首先是最上面第一个点亮、其次是前两个点亮、其次是前三个点亮……直至8个灯全部点亮&#xff0c;8个灯全部灭&#xff0c;重复这个过程&#xff0c…...

微信小程序:button微信开放能力打开客服会话分享到聊天框

文档 https://developers.weixin.qq.com/miniprogram/dev/component/button.html 打开客服会话 按钮关键属性 open-type"contact"功能按钮 <button class"mo-open-type"open-type"contact"> </button>分享 <button class&q…...

【数据结构】——队列实现二叉树的功能

前言&#xff1a;二叉树的实现方式多种多样&#xff0c;有数组实现满二叉树&#xff0c;有链表实现完全二叉树&#xff0c;今天我们就用队列来实现二叉树。 创建二叉树&#xff1a; typedef int BTDataType; typedef struct BinaryTreeNode {BTDataType data;struct BinaryTre…...

【已解决】Win7虚拟机安装VMtools报错

在做以前的实验的时候发现要用到Win7虚拟机&#xff0c;于是就安装了一个Win7的虚拟机&#xff0c;但是发现屏幕太小&#xff0c;而且来回复制文本、复制文件太不方便了&#xff0c;索性就安装了VMtools&#xff0c;发现还安装不成– 情况1 报错&#xff1a;本程序需要您将此…...

华为OD机试真题-小明找位置-2023年OD统一考试(C卷)

题目描述&#xff1a; 小朋友出操&#xff0c;按学号从小到大排成一列&#xff1b;小明来迟了&#xff0c;请你给小明出个主意&#xff0c;让他尽快找到他应该排的位置。 算法复杂度要求不高于nLog(n)&#xff1b;学号为整数类型&#xff0c;队列规模<10000&#xff1b; 输…...

2023.2版idea安装教程,现在jdk8已经过去式了,不同idea支持的jdk不同。升级jdk后idea也要随之升级

下载idea2023.2版本&#xff0c;下载之前需要删除之前的版本&#xff0c;一定要删除干净&#xff0c;删除程序要勾选那两个delete 下载路径&#xff1a;其他版本 - IntelliJ IDEA (jetbrains.com.cn) 选择2023.2版本 下载后进入安装程序&#xff0c;选择安装目录&#xff0c;然…...

CSS3技巧36:让内容垂直居中的三种方式

让内容垂直居中&#xff0c;是一个很重要的应用情景&#xff0c;在很多场合都会需要。这也是面试的时候&#xff0c;一些考官喜欢拿来初面的小题目。 这里&#xff0c;小结下让内容垂直居中的三种方式。 当然&#xff0c;读者如果有更好的方法&#xff0c;也可以提出来。 基本…...

空间运算设备-Apple Vision Pro

苹果以其在科技领域的创新而闻名&#xff0c;他们致力于推动技术的边界&#xff0c;这在他们的产品中表现得非常明显。他们尝试开发一项的新型突破性显示技术。在 2023 年 6 月 5 日官网宣布将发布 Apple Vision Pro 头戴空间设备&#xff0c;我们一起来了解一下 Apple Vision …...

cocos creator “TypeError: Cannot set property ‘string‘ of null

背景&#xff1a; 学习cocos creator时遇到"TypeError: Cannot set property string of null" 错误。具体代码如下&#xff1a;property({ type: Label })public stepsLabel: Label | null null;update(deltaTime: number) {this.stepsLabel.string Math.floor(…...

简谈MySQL的binlog模式

一、MySQL的binlog模式介绍 MySQL的binlog模式是一种日志模式&#xff0c;用于记录对MySQL数据库进行的更改操作。通过启用binlog模式&#xff0c;可以将数据库的更改操作记录到二进制日志文件中&#xff0c;以便在后续需要时进行恢复和复制。 要启用binlog模式&#xff0c;请…...

如何在Windows下使用Rufus轻松格式化ext文件系统:完整指南

如何在Windows下使用Rufus轻松格式化ext文件系统&#xff1a;完整指南 【免费下载链接】rufus The Reliable USB Formatting Utility 项目地址: https://gitcode.com/GitHub_Trending/ru/rufus 还在为在Windows系统下无法直接创建Linux文件系统而烦恼吗&#xff1f;&…...

在对话中处理数学方程时,OpenClaw 的 LaTeX 渲染引擎支持哪些宏包?

在讨论OpenClaw的LaTeX渲染能力时&#xff0c;很多人会直接去翻官方文档或者技术手册。但如果你真的在项目里用过它&#xff0c;尤其是处理过那些复杂的数学对话场景&#xff0c;就会发现文档里写的东西和实际能用的东西&#xff0c;中间往往隔着一层实践的距离。 OpenClaw在设…...

终极指南:如何利用Reor AI智能笔记应用的本地化语义搜索与智能推荐功能

终极指南&#xff1a;如何利用Reor AI智能笔记应用的本地化语义搜索与智能推荐功能 【免费下载链接】reor Self-organizing AI note-taking app that runs models locally. 项目地址: https://gitcode.com/GitHub_Trending/re/reor Reor是一款革命性的AI智能笔记应用&am…...

基于MATLAB的图像加密解密系统 可以正确无误的对图像进行加密和解密 带GUI界面

基于MATLAB的图像加密解密系统 可以正确无误的对图像进行加密和解密 带GUI界面&#xff0c;一步一步完整运行你是否有过这样的疑问——如何让一张普通图片变成外星密文&#xff1f;在MATLAB里玩转图像加密真的可以像搭积木一样简单。今天咱们就来捣鼓一个带界面的图像加密系统&…...

OpenClaw多语言支持:百川2-13B量化模型国际化任务实践

OpenClaw多语言支持&#xff1a;百川2-13B量化模型国际化任务实践 1. 为什么需要多语言自动化助手 去年接手一个跨国协作项目时&#xff0c;我每天要处理来自五个国家的邮件、文档和会议记录。最头疼的不是时差问题&#xff0c;而是不同语言的文档混在一起——英文技术规范、…...

Ai人工智能知识补充

文章目录 1.5 数据与算法基础:智能系统的“燃料”与“引擎” 1.5.1 数据工程:从原始数据到模型“燃料”的全链路 1.5.2 算法模型构建:从问题定义到模型部署的“炼金术” 1.5.3 数据隐私与安全:在价值挖掘与权利保护间走钢丝 1.6 面临的主要挑战:通往真正智能之路的险阻 1.…...

GIL Free ≠ Thread Safe:从Linux futex源码到Python对象头重定义,解构无锁环境下的引用计数崩溃根因(含gdb逆向调试录屏脚本)

第一章&#xff1a;GIL Free ≠ Thread Safe&#xff1a;核心命题与崩溃现象全景Python 的全局解释器锁&#xff08;GIL&#xff09;长期被视为多线程性能的桎梏&#xff0c;而 PyPy、Jython 乃至最新 CPython 3.13 的实验性 GIL-free 构建&#xff0c;常被误读为“天然支持安全…...

完整指南:为什么选择WeChatMsg开源工具解决你的微信聊天记录备份与分析难题

完整指南&#xff1a;为什么选择WeChatMsg开源工具解决你的微信聊天记录备份与分析难题 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitH…...

nli-distilroberta-base效果展示:Entailment/Contradiction/Neutral三类判别置信度热力图

nli-distilroberta-base效果展示&#xff1a;Entailment/Contradiction/Neutral三类判别置信度热力图 1. 项目概述 nli-distilroberta-base是基于DistilRoBERTa模型的自然语言推理(NLI)Web服务&#xff0c;专门用于分析两个句子之间的逻辑关系。这个轻量级模型能够快速准确地…...

AI专著撰写新方法:借助工具实现从构思到成书的完美跨越

创新与AI工具助力学术专著写作 创新是学术专著的核心&#xff0c;也是写作过程中最具挑战性的部分。一本合格的专著不应只是对现有研究成果的简单罗列&#xff0c;而需要提出贯穿全书的独到见解、理论框架或研究方法。在浩如烟海的学术文献中&#xff0c;挖掘尚未被探索的研究…...