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

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode(52)最小栈【栈】【中等】

目录 1.题目2.答案3.提交结果截图 链接: 最小栈 1.题目 设计一个支持 push ,pop ,top 操作,并能在常数时间内检索到最小元素的栈。 实现 MinStack 类: MinStack() 初始化堆栈对象。void push(int val) 将元素val推入堆栈。void…

PandoraFMS 监控软件 任意文件上传漏洞复现

0x01 产品简介 Pandora FMS 是用于监控计算机网络的软件。 Pandora FMS 允许以可视化方式监控来自不同操作系统、服务器、应用程序和硬件系统(例如防火墙、代理、数据库、Web 服务器或路由器)的多个参数的状态和性能。 0x02 漏洞概述 PandoraFMS upload_head_image.php 接…

web前端开发html/css练习

目标图&#xff1a; 素材&#xff1a; 代码&#xff1a; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.org/1999/xhtml"…

通过误差改变控制的两种策略

如果反馈误差越来越大&#xff0c;需要改变调节方向以减小误差并实现更好的控制。以下是两种常见的调节方向改变的方法&#xff1a; PID控制器中的积分限制&#xff1a;在PID控制中&#xff0c;积分项可以用来减小稳态误差。然而&#xff0c;当反馈误差持续增大时&#xff0c;积…

8、操作符重载

友元 可以通过friend关键字&#xff0c;把一个全局函数、另一个类的成员函数或者另一个类整体&#xff0c;声明为授权类的友元友元拥有访问授权类任何非公有成员的特权友元声明可以出现在授权类的公有、私有或者保护等任何区域且不受访问控制限定符的约束友元不是成员&#xf…

计算机概论第十三章

Answers are in blue. Computer Science Illuminated, Seventh Edition Nell Dale, PhD; John Lewis, PhD CHAPTER 13 EXERCISES AND ANSWERS For Exercises 1–5, match the type of ambiguity with an example. Lexical词汇歧义Referential指代歧义Syntactic句法 “Stand up…

机器学习之无监督学习:九大聚类算法

今天&#xff0c;和大家分享一下机器学习之无监督学习中的常见的聚类方法。 今天&#xff0c;和大家分享一下机器学习之无监督学习中的常见的聚类方法。 在无监督学习中&#xff0c;我们的数据并不带有任何标签&#xff0c;因此在无监督学习中要做的就是将这一系列无标签的数…

常见统计学习方法特点总结

1. 概述 方法适用问题模型特点模型类型学习策略损失函数学习算法1感知机二分类分离超平面判别模型极小化误分点到超平面距离误分点到超平面距离SGD2KNN多分类&#xff0c;回归特征空间&#xff0c;样本点判别模型---3朴素贝叶斯多分类特征与类别的联合概率分布&#xff0c;条件…

“四位一体”引领企业数据治理新模式

数字化时代&#xff0c;数据作为新的生产要素受到了前所未有的关注和重视。 随着企业业务的发展&#xff0c;数据积累越来越多。怎么管理好数据&#xff1f;如何利用好数据&#xff1f;数据价值如何挖掘&#xff1f;成为很多企业面临的难题&#xff01; 面对这些棘手的问题&am…

golang学习笔记——爬虫colly入门

文章目录 爬虫第一个爬虫colly爬虫框架colly爬虫示例-爬取图片colly采集器配置CallbacksAdd callbacks to a CollectorCall order of callbacks1. OnRequest2. OnError3. OnResponse4. OnHTML5. OnXML6. OnScraped OnHTML方法 参考资料 爬虫 很多语言都可以写爬虫&#xff0c;…

python爬取robomaster论坛文章数据,携带登录信息

一. 内容简介 python爬取robomaster论坛文章数据。 二. 软件环境 2.1vsCode 2.2Anaconda version: conda 22.9.0 2.3代码 三.主要流程 3.1 接口分析&#xff0c;以及网页结构分析 # 这是文章链接,其实id就是文章的id # https://bbs.robomaster.com/forum.php?modview…

使用wire重构商品微服务

一.wire简介 Wire 是一个轻巧的Golang依赖注入工具。它由Go Cloud团队开发&#xff0c;通过自动生成代码的方式在编译期完成依赖注入。 依赖注入是保持软件 “低耦合、易维护” 的重要设计准则之一。 此准则被广泛应用在各种开发平台之中&#xff0c;有很多与之相关的优秀工…

Redis主从架构中从节点的master_link_status:down

项目场景&#xff1a; 在搭建Redis的主从架构时&#xff0c;查看Redis的从节点状态时发现其连接的主节点的状态为down&#xff0c;并且查看主节点的状态时发现连接的从节点数量为0。 问题描述 原因分析&#xff1a; 可能在主节点中配置了密码&#xff0c;即requirepass。 解决…

angular状态管理方案(ngrx)

完全基于redux的ngrx方案&#xff0c;我们看看在angular中如何实现。通过一个简单的计数器例子梳理下整个流程 一 安装 &#xff1a;npm i ngrx/store 这里特别要注意一点&#xff1a;安装 ngrx/store的时候会出现和angular版本不一致的问题 所以检查一下angular/core的版本…

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

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

Endnote在word中加入参考文献及自定义参考文献格式方式

第一部分&#xff1a;在word中增加引用步骤 1、先下载对应文献的endnote引用格式&#xff0c;如在谷歌学术中的下载格式如下&#xff1a; 2、在endnote中打开存储env的格式库&#xff0c;导入对应下载的文件格式&#xff1a;file>import>file>choose,import对应文件&a…

C.小苯的排列构造

C-小苯的排列构造_北京信息科技大学第十五届程序设计竞赛&#xff08;同步赛&#xff09; (nowcoder.com) 凑2很容易想出来&#xff0c;但是2 4 1 3 这个内核不好想&#xff0c;算是一种尝试和经验吧 #include<bits/stdc.h> using namespace std;int n;int main() {cin&g…

【Linux】如何清空某个文件的内容

cat /dev/null > file1 清空某个文件的内容使用cat /dev/null > file1&#xff0c;它将 /dev/null 的内容&#xff08;空内容&#xff09;重定向到 file1。 如下所示&#xff0c;file1文件里的内容被清空。 错误写法 错误写法是&#xff1a;cat file1 > /dev/null&…

近期Chrome浏览器 不知哪个版本升级后原先http强制跳转到https,导致服务端302强制跳转到http也没反应

关于Chrome更新http强制跳转到https解决方法 近期Chrome浏览器 不知哪个版本升级后原先http强制跳转到https&#xff0c;导致服务端302强制跳转到http也没反应一、F12检查加载的Response Headers中有没有Non-Authoritative-Reason二、找了资料后得到解决方案&#xff1a;三、找…

Navicat 技术指引 | 适用于 GaussDB 分布式的备份/还原功能

Navicat Premium&#xff08;16.3.3 Windows 版或以上&#xff09;正式支持 GaussDB 分布式数据库。GaussDB 分布式模式更适合对系统可用性和数据处理能力要求较高的场景。Navicat 工具不仅提供可视化数据查看和编辑功能&#xff0c;还提供强大的高阶功能&#xff08;如模型、结…