使用VueRouter实现标签页路由导航功能

背景：多个页面一起使用的时候常常会用到标签页功能，但如ElementPlus框架只提供了标签页功能可是不能结合VueRouter路由来实现链接直接打开标签，下面介绍一下如何使用链接来打开标签和根据链接切换当前标签。

先看看效果：

一. 准备工作

        1. 新建一个Vue3项目

        2. 安装Element Plus （npm install element-plus）

        3. 安装Vue Router （npm install vue-router@4）

二. 添加路由配置文件

        我这里将配置文件命名为/configs/route.config.js

import { defineAsyncComponent } from 'vue' //对于标签页用到的页面可以按需进行引入

export default [{
    path: '/',
    name: '标签页测试项目',
    //标签页引用的显示模版
    component: import('@/components/template/DefaultTemplate.vue'),
    meta: {
        //缓存标签页里的组件
        keepAlive: true,
        //导航中不显示此链接
        hidden: true
    }
}, {
    path: '/product',
    name: '产品管理',
    redirect: '/product/index',
    children: [{
        path: '/product/index',
        name: '产品',
        component: defineAsyncComponent(() => import('@/pages/product/index.vue')),
        //归属那个标签页模版
        meta: { tagsPath: '/' } 
    },
    {
        path: '/product/type',
        name: '产品分类',
        component: defineAsyncComponent(() => import('@/pages/product/type.vue')),
        //归属那个标签页模版
        meta: { tagsPath: '/' }
    }]
}, {
    path: '/login',
    name: '用户登陆',