动态修改面包屑标题

最新推荐文章于 2024-04-28 00:32:41 发布

supming1

最新推荐文章于 2024-04-28 00:32:41 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/supming1/article/details/121404608

vue 专栏收录该内容

27 篇文章

订阅专栏

本文介绍在Vue+ElementUI后台管理系统中如何通过配置不同路由实现新增与编辑页面的面包屑标题动态切换，以此提高代码复用性和可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在用vue + element ui 做后台管理系统的时候，一般会有面包屑来指示当前所处的页面，一般是拿路由信息中的meta.title作为面包屑。如果遇到编辑和新增公用公用一个页面的情况，该怎么动态的修改标题呢？可以考虑在路由守卫中判断是否有id，来动态的修改meta。但特意写个路由守卫来这样修改并不是特别好，其他人维护的时候可能不知道你这样设置，可维护性不好，另一方面，还需要显示面包屑的组件支持meta.title动态修改，比较麻烦。可以通过配置两个路由，指向同一个页面的方式，来取巧的设置。如下：

{
   path: 'save',
   name: 'teamCreate',
   meta: {
     title: '新增成员',
     hideInMenu: true
   },
   component: () => import('@/views/team/save.vue')
},
{
   path: 'save/:id',
   name: 'teamEdit',
   meta: {
     title: '编辑成员',
     hideInMenu: true
   },
   component: () => import('@/views/team/save.vue')
},