Как совместить переход по вкладкам из element plus и vue-router?

Question

[Tikit]

Как можно совместить переход по вкладкам на другую страницу из element plus и vue-router? Например, при нажатии на вкладку мы перемещались на нужную страницу.

element plus

<template>
   <el-tabs :tab-position="tabPosition" style="height: 200px" class="demo-tabs">
        <el-tab-pane label="Tab1">Страница1</el-tab-pane>
        <el-tab-pane label="Tab2">Страница2</el-tab-pane>
        <el-tab-pane label="Tab3">Страница</el-tab-pane>
    </el-tabs>
</template>

vue-router

<router-link :to="{name: 'transition'}" >Переход</router-link>

Answer 1

[0xD34F]

Лучше никак.

Так что сперва о том, как надо. Вместо вкладок используем меню - оно умеет работать с роутером:

<el-menu mode="horizontal" router :default-active="$route.name">
  <el-menu-item
    v-for="n in $router.getRoutes()"
    v-text="n.name"
    :index="n.name"
    :route="n"
  />
</el-menu>
<router-view />

Ну а вкладки... Делаем вычисляемое свойство, представляющее активный маршрут, геттер - возвращает имя, сеттер - по имени выполняет переход:

computed: {
  activeRouteName: {
    get() {
      return this.$route.name;
    },
    set(name) {
      this.$router.push({ name });
    },
  },
},

Используем это свойство для управления вкладками. Контент у всех вкладок одинаковый - <router-view>, но рендерить будем его только в активной вкладке. Вот такой получается говнокод:

<el-tabs v-model="activeRouteName">
  <el-tab-pane v-for="{ name: n } in $router.getRoutes()" :label="n" :name="n">
    <router-view v-if="activeRouteName === n" />
  </el-tab-pane>
</el-tabs>