当前位置: 首页 > 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}
}

在这里插入图片描述

http://www.lryc.cn/news/256042.html

相关文章:

  • 已通过考试和认证注册以及后续计划表
  • 开源计算机视觉库OpenCV详解
  • 使用pytorch查看中间层特征矩阵以及卷积核参数
  • HarmonyOS4.0从零开始的开发教程09页签切换
  • 大电流H桥电机驱动电路的设计与解析(包括自举电路的讲解,以IR2104+LR7843为例)
  • windows11 windows 11 (win11 win 11) 怎么安装 Python3 ? numpy? sounddevice? 声音信号处理库?
  • git如何配置多个远程仓库,并且进行切换
  • 计算机存储单位 + 程序编译过程
  • vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
  • 单片机双机通信控制跑马灯
  • 微信小程序:button微信开放能力打开客服会话分享到聊天框
  • 【数据结构】——队列实现二叉树的功能
  • 【已解决】Win7虚拟机安装VMtools报错
  • 华为OD机试真题-小明找位置-2023年OD统一考试(C卷)
  • 2023.2版idea安装教程,现在jdk8已经过去式了,不同idea支持的jdk不同。升级jdk后idea也要随之升级
  • CSS3技巧36:让内容垂直居中的三种方式
  • 空间运算设备-Apple Vision Pro
  • cocos creator “TypeError: Cannot set property ‘string‘ of null
  • 简谈MySQL的binlog模式
  • Linux 环境部署RabbitMQ
  • 【1day】泛微e-office OA系统xml.php 文件 SORT_ID 参数 SQL 注入漏洞学习
  • 智能无人零售:革新零售消费体验的未来
  • 代币化对网约车区块链平台的影响
  • YOLOv7 学习笔记
  • 【51单片机系列】74HC595实现对LED点阵的控制
  • Canal笔记:安装与整合Springboot模式Mysql同步Redis
  • C++的继承语法
  • C# .NET平台提取PDF表格数据,并转换为txt、CSV和Excel表格文件
  • spring boot学习第五篇:spring boot与JPA结合
  • 代理IP怎么使用?Mac苹果系统设置http代理IP教程