vue-router-tab/docs/guide/essentials/rule.md

页签规则

不同的页签维护着各自的页面缓存，而页签规则定义了不同的路由打开页签的方式。

内置规则

• path (默认规则)

  • 规则：route => route.path
  • 说明：相同route.params的路由共用页签

• fullPath

  • 规则：route => route.fullPath.replace(route.hash, '')
  • 说明：相同route.params和route.query的路由共用页签

全局页签规则

通过配置 router-tab 组件的 alive-id 属性，您可以定义全局的页签规则

示例：

<router-tab :alive-id="route => route.fullPath.replace(route.hash, '')"/>

例子中，配置 alive-id 为 fullPath 去除 hash 部分。

根据该规则，page/1 和 page/1?query=2、page/2、page/2?query=2 这四个地址都是打开不同的页签。而 page/1 和 page/1#hash1 是同一个页签，因为它们忽略 hash 后的路径一致。

该规则已经内置在 RouterTab 中了，因此，您也可以直接这样使用：

<router-tab alive-id="fullPath"/>

路由页签规则

通过配置路由的 meta.aliveId 属性，您可以针对特定路由定制页签规则

示例：

const route = {
  path: '/my-page/:catalog/:type',
  component: {
    template: '<div>定制规则：{{$route.params.catalog}}/{{$route.params.type}}</div>'
  },
  meta: {
    title: '定制规则',
    aliveId (route) {
      return `/my-page/${route.params.catalog}`
    }
  }
}

根据示例中的页签规则，/my-page/a/1 和 /my-page/a/2 打开的是同一个页签。而 /my-page/b/1 和 /my-page/b/2 则打开另外一个页签