今天做了一个需求，前端需要打开明细，然后通过关闭按钮关闭明细，返回上一标签页。（用到vue-route）

1.主页面路由配置，我在详情按钮上绑定一个事件，用来跳转明细。带上当前列的id用来查询明细页面的数据，用于展示。

这里的name：paydata 就是待会需要在路由文件中定义的。

在路由文件中配置路由信息，component 后面的地址，是你的明细页位置，name是刚才定义的路由名称paydata。这里配置完成后，前端就可以跳转了。（每个属性详细的介绍自己去vue route官网查看。用法很多，还可以传body参数。）

2.明细页面配置，同样的，取消按钮绑定一个方法handleClose，

注意，方法里面两个调用的顺序不要写反，先返回后关闭，不然返回就找不到上一页标签。

这里的path 就是上一页标签的页面位置。

明细页面是可以接收到上一个页面传来参数的，this.$route.params.id 就是刚才route配置中传的父页面id这样的话就能在页面初始化的时候查询数据为明细页面做填充。

3.看下跳转数据填充和关闭标签返回上一页效果

完美！贴下代码：

关闭标签返回上一页：

    handleClose() {
      // 返回上一页
      this.$router.back();
      // 关闭当前页
      const obj = { path: "/base/roompay/data" };
      this.$tab.closeOpenPage(obj);

    },

跳转明细：

    //详情点击跳转
    router(row) {
      this.$router.push({ name: 'paydata', params: { id: row.id } })
    },

路由配置：

  {
    path: '/base/roompay/data',
    component: Layout,
    hidden: true,
    permissions: ['base:pay:list'],
    children: [
      {
        path: '/:id/(\\d+)',
        component: () => import('@/views/base/roompay/data'),
        name: 'paydata',
        meta: { title: '个人月份住房信息', activeMenu: 'base/roompay/index' }
      }
    ]
  },