需求:在开发后台系统时,对了开发效率,一般列表的新增和详情路由,一般都是配置两个文件,两个路由,但是这样后期维护的话就要同时修改两个文件造成工作量的增加,为了方便将新增和修改公用一个路由,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
        }
      });
    },

Logo

前往低代码交流专区

更多推荐