vue-admin-element路由的meta中动态title设置，可以根据不同情况展示不同的内容，新增，修改同一个路由不同title显示实现

本文链接：https://blog.youkuaiyun.com/weixin_42484657/article/details/122468080

本文介绍了一种简化前端路由管理的方法，通过动态设置路由标题来减少维护成本。利用Vue路由的query参数实现新增和编辑操作的复用，提高了开发效率。

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

需求：在开发后台系统时，对了开发效率，一般列表的新增和详情路由，一般都是配置两个文件，两个路由，但是这样后期维护的话就要同时修改两个文件造成工作量的增加，为了方便将新增和修改公用一个路由，title显示不同的内容，这个时候就要对代码稍作修改；

两个路由的写法：

一个路由的写法：这个时候就不用区分新增和编辑了

找到 layout/tagsview/index文件

正常显示路由是写死每一个title

这个时候我们修改成

然后再methods中处理好显示什么内容在 return出来

到此处理title这一块就写完啦，然后就是具体我们做跳转的时候在query中去传1或者2就可以显示新增或者修改的动态标题

如下：我使用的是用query,也可以使用param去传递，如果需要传递其他参数互不影响

具体代码：

//router.js路由配置
 {
      path: 'syncDataAdd',
      component: () =>
        import('@/views/other/syncData/components/add'),
      name: 'syncDataAdd',
      meta: {
        title: '数据同步任务',

        activeMenu: '/other/syncData'
      },
      hidden: true
    },

//tagsview中的代码
 
 {{ setName(tag) }}

setName(route) {
      if (route.query.type) {
        if (route.query.type === 1) {
          return '新增' + route.title;
        }
        if (route.query.type === 2) {
          return '编辑' + route.title;
        }
      } else {
        return route.title;
      }
    },

//具体跳转的代码
 // 编辑
    handleEdit(row) {
      console.log(row);
      this.$router.push({
        name: 'minDifferentPriceAdd',
        query: {
          id: row.id,
          type: 2
        }
      });
    },
    // 新增
    handleAdd() {
      this.$router.push({
        name: 'minDifferentPriceAdd',
        query: {
          type: 1
        }
      });
    },