实现:切换页面切换标题,扩展 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}
}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/207117.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第一启富金:新添澳大利亚(ASIC)牌照

第一启富金:澳大利亞證券及投資委員會(ASIC) GOLDWELL GLOBAL PTY LTD 是 WHOLESALE INVESTOR SERVICES PTY LTD(CAR 編號 001304943)的企業授權代表開發澳大利亞客戶,WHOLESALE INVESTOR SERVICES PTY LT…

XML是什么

XML是是什么? XML(Extensible Markup Language),中文是可扩展标记语言,是标准通用标记语言的子集。它是一种标记语言,用于标记电子文档,使其结构化。 XML可以用来标记数据,定义数据…

【软件推荐】文本转语音,语音转wav,导入ue5

文字转语音 在线免费文字转语音 - TTSMaker官网 | 马克配音https://ttsmaker.cn/ 文件转换器 语音转wav Convertio — 文件转换器https://convertio.co/zh/

HarmonyOS应用程序框架——UIAbility实操

UIAbility概述 UIAbility是一种包含用户界面的应用组件,主要用于和用户进行交互。UIAbility也是系统调度的单元,为应用提供窗口在其中绘制界面。 每一个UIAbility实例,都对应于一个最近任务列表中的任务。 一个应用可以有一个UIAbility&…

Leetcode—901.股票价格跨度【中等】

2023每日刷题&#xff08;五十二&#xff09; Leetcode—901.股票价格跨度 算法思想 实现代码 class StockSpanner { public:stack<pair<int, int>> st;int curday -1;StockSpanner() {st.emplace(-1, INT_MAX);}int next(int price) {while(price > st.top(…

油猴(Tampermonkey)浏览器插件简单自定义脚本开发

介绍 浏览器插件&#xff0c;包括油猴插件和其他插件&#xff0c;通过它们可以实现浏览器网页的定制化与功能增强。 其他插件一般只有某种具体的功能&#xff0c;且已经写死而不能更改&#xff0c;比如Adblock插件只用于去广告。 油猴插件是一款用于管理用户脚本的插件&…

使用Rust 构建C 组件

协议解析&#xff0c;这不就很快了&#xff0c;而且原生的标准库红黑树和avl 树支持&#xff0c;异步tokio 这些库&#xff0c;编写应用组件就很快了 rust 标准库不支持 unix 的消息队列&#xff0c;但是支持 shm 和 uds&#xff0c;后者从多方面考虑都比&#xff0c;消息队列更…

教育类直播介绍

教育类直播是一种在线教育形式&#xff0c;它允许学生和教师通过实时视频通话进行互动学习。这种学习方式可以为学生提供更灵活的学习时间和地点&#xff0c;同时也可以帮助教师更好地与学生进行互动和指导。 在教育类直播中&#xff0c;学生可以通过网络与教师和其他学生进行…

c/c++中一些不常用但有用的知识

1.变长数组 bool fun(int cnt) {unsigned char data[cnt];return true; } 在 C 语言中&#xff0c;变长数组&#xff08;Variable Length Arrays&#xff0c;VLA&#xff09;是 C99 标准引入的特性&#xff0c;允许使用变量来定义数组的长度。因此&#xff0c;在 C 版本的代码…

快速在VMware虚拟机上运行Kali Linux(保姆级教程)

本期将演示如何在VMware虚拟机上快速、轻松地安装Kali Linux。Kali Linux是一款专为渗透测试和网络安全而设计的操作系统&#xff0c;拥有很多强大的工具和功能。 在运行任何虚拟机之前&#xff0c;一定要先确保已经打开主板BIOS上的虚拟化支持。 下载VMware 接着来到vmware的…

vue 一直运行 /sockjs-node/info?及 /sockjs-node/info报错解决办法

sockjs-node介绍 sockjs-node 是一个JavaScript库&#xff0c;提供跨浏览器JavaScript的API&#xff0c;创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。 服务端&#xff1a;sockjs-node&#xff08;https://github.com/sockjs/sockjs-node&#xff09; 客户端&a…

[全志Tina/Linux]全志修改bootlogo分区数据从而修改bootlogo

一、需求 在不进行镜像烧录的情况下&#xff0c;通过启动项或脚本将已存在于主板的bootlogo文件更新到bootlogo分区中&#xff0c;从而实现bootlogo的更新 二、操作 1、在主板上查找bootlogo文件路径 find -name bootlogo* 实机效果&#xff1a; 2、进入文件夹路径 cd ./d…

Java网络编程——对象的序列化与反序列化

当两个进程进行远程通信时&#xff0c;彼此可以发送各种类型的数据&#xff0c;如文本、图片、语音和视频等。无论是何种类型的数据&#xff0c;都会以二进制序列的形式在网络上传送。当两个Java进程进行远程通信时&#xff0c;一个进程能否把一个Java对象发送给另一个进程呢&a…

LeetCode 每日一题 Day 6(DFS+BFS)

1466. 重新规划路线 n 座城市&#xff0c;从 0 到 n-1 编号&#xff0c;其间共有 n-1 条路线。因此&#xff0c;要想在两座不同城市之间旅行只有唯一一条路线可供选择&#xff08;路线网形成一颗树&#xff09;。去年&#xff0c;交通运输部决定重新规划路线&#xff0c;以改变…

c语言词法分析器

词法分析器&#xff08;也称为词法解析器或词法扫描器&#xff09;是编译器的一个组成部分&#xff0c;它的任务是将输入的源代码&#xff08;字符流&#xff09;分解成称为“标记”的序列&#xff0c;其中每个标记对应于源代码中的一个单词或符号。 以下是一个简单的C语言词法…

12月7日作业

使用QT模仿一个登陆界面&#xff08;模仿育碧Ubisoft登录界面&#xff09; #include "myqq.h"MyQQ::MyQQ(QWidget *parent): QMainWindow(parent) {this->resize(880,550); //设置窗口大小this->setFixedSize(880,550); //固定窗口大小this->setStyleShee…

SpringMVC 案例

文章目录 前言1. 计算器1.1 准备前端代码1.2 测试前端代码1.3 完成后端代码1.4 验证程序 2. 留言板2.1 前端代码准备2.2 测试前端代码2.3 完成前后端交互代码2.4 完成后端代码2.5 案例测试2.6 完善前后端交互2.7 完善后端代码2.8 完整功能测试 lombok简单的方式添加Lombok工具3…

HarmonyOS学习 第1节 DevEco Studio配置

俗话说的好&#xff0c;工欲善其事,必先利其器。我们先下载官方的开发工具DevEco Studio. 下载完成后&#xff0c;进行安装。 双击DevEco Studio&#xff0c;点击Next按照指引完成安装 重新启动DevEco&#xff0c;点击 Agree 进入环境配置&#xff0c;安装Node.js和ohpm 点击Ne…

MQTT 协议入门:轻松上手,快速掌握核心要点

文章目录 什么是 MQTT&#xff1f;MQTT 的工作原理MQTT 客户端MQTT Broker发布-订阅模式主题QoS MQTT 的工作流程开始使用 MQTT&#xff1a;快速教程准备 MQTT Broker准备 MQTT 客户端创建 MQTT 连接通过通配符订阅主题发布 MQTT 消息MQTT 功能演示保留消息Clean Session遗嘱消…

spring IOC介绍

spring的Ioc真是个好东西啊&#xff0c;那它到底是什么东西呢&#xff0c;控制反转&#xff0c;到底是怎么转的呢&#xff1f; 假设啊你现在是一个导演&#xff0c;想排部戏&#xff0c;那是不是得需要演员和舞台(spring中的bean)&#xff0c;如果按平常的编程思维就是new 一个…