tagsView功能

一、完整方案

1.监听路由变化，生成数据源

（1）在appMain组件中监听route

// 监听route变化
watch(
  route,
  (to, from) => {
    const {
      fullPath,
      meta,
      path,
      params,
      query,
      meta: { title }
    } = to
    if (isTag(to)) {
      store.commit('app/setTagViews', {
        fullPath,
        meta,
        path,
        params,
        query,
        title
      })
    }
  },
  { immediate: true }
)

（2）判断to对象是为要显示的页面

（3）结构出有用的信息，保存到store中

2.创建tags组件：

（1）根据数据渲染tag

使用route.path判断选中tag

（2）路由跳转功能

3.处理鼠标右键效果，根据右键处理对应数据

（1）监听鼠标右键点击事件 @contextMenu

（2）关闭contextMenu事件

在tagsview组件中监听 visible属性：

当visible为true时，给document添加click事件监听，将visible改为false；

当visible为false时，移除document的事件监听

4.处理基于路由的动态过度

（1）官网给出了模板代码

    <router-view v-slot="{ Component, route }">
      <transition name="fade-transform" mode="out-in">
        <keep-alive>
          <component :is="Component" :key="route.path" />
        </keep-alive>
      </transition>
    </router-view>