vue3+ element-plus实现路由标签栏？

Question

请问大佬们，如何点击左侧的el-side的菜单，右侧el-main就生成对应的路由标签栏el-tag，每个标签对应一个路由页面，点击该标签可以进入该路由页面？？？

Answer 1

在全局路由守卫beforeEach()可以拿到跳转页面的路由信息，存在vuex里面，右侧路由标签的数据从vuex拿并做渲染

Answer 2

我的方案是，在路由meta里存标签名字，标签里在从route里拿到名称。

{
    name: 'xxx',
    path: 'xxx',
    component: () => import('xxx'),
    meta: {
        labelName: '上传图片'
    }
}

当然，方法有许多。

Answer 3

vue3的没有，vue2的我自己写过一个，精简一下给你个最基础的

1、路由

 {
      path: '/A',
      name: 'A',
      component: () => import('@/view/A'),
      meta: {
        title: 'A页面',
      }
    }

2、单开个组件

//data
 tabData: [],//示例{name:'',link:''}

//全局监听路由
    watch: {
      //监听路由
      $route(to, form) {
        let temp = this.tabData.filter(item => {//判断当前跳转路由是否存在
          return item.link === decodeURIComponent(to.fullPath);//路由参数带中文，刷新后，中文被转码成字符，会重新再跳转一次路由，需解码回中文
        });
        if (temp.length === 0) {//不存在，push
          this.tabData.push({
            name: to.meta.title,
            link: decodeURIComponent(to.fullPath)
          });
        }
      }
    }

3、直接模板循环渲染tabData

<ul>
      <li v-for="item in tabData" :key="item.link">{{item.name}}</li>
</ul>

4、把组件引入app.vue