vue 打开重复页签

先上图

这两个红色框线实际都是产品详情页面，用产品名称替代了页面的title

1、首先在router/index.js配置路由

{
    path: '/productDetail',
    component: Layout,
    hidden: true,
    children: [
      {
        path: 'productDetail/:productId(\\d+)', //必须该种方法传递参数
        component: () => import('@/views/product/productKanBan/detail'),
        name: 'productDetail',
        meta: { title: '产品详情' }
      }
    ]
  },

2、创建tab.js 文件，添加页签方法

import store from '@/store'
import router from '@/router';
  // 添加tab页签
  //title 页签显示名称
  //url 跳转路由
export function  openPage(title, url) {
  var obj = {path: url, meta: {title: title}}
  store.dispatch('tagsView/addView', obj);
  return router.push(url);
}

3、main.js 中挂载方法

import { openPage } from "@/utils/tab";
Vue.prototype.openPage = openPage

4、在需要位置调用方法

 this.openPage(row.name,'/productDetail/productDetail/'+row.id)