How to implement top routing tag jump by vue+elementUI

<!-- TagsView/ -->    
<template>
  <el-scrollbar
    ref="scrollContainer"
    :vertical="false"
    class="scroll-container"
    @="handleScroll"
  >
    <slot />
  </el-scrollbar>
</template>

<script lang="ts">
import Vue from 'vue';

export default ({
  data () {
    return {
      left: 0
    };
  },
  computed: {
    scrollWrapper () {
      return (this.$refs as any).scrollContainer.$;
    }
  },
  methods: {
    // Mouse swipe event    handleScroll (e: { wheelDelta: number; deltaY: number }) {
      const eventDelta =  || - * 40;
      const $scrollWrapper = ;
      $ = $ + eventDelta / 4;
    }
  }
});
</script>

<style lang="less" scoped>
.scroll-container {
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  width: 100%;
  /deep/.el-scrollbar__bar {
    bottom: 0px;
  }
  /deep/.el-scrollbar__wrap {
    height: 49px;
    // margin-bottom: -17px !important;
    // margin-right: -17px !important;
  }
}
</style>

// modules/
const state = {
  // Visited page tags  visitedViews: [
    {
      path: '/dashboard/index',
      meta: { title: 'front page', affix: true }
    }
  ],
  // The name value of the visited page  cachedViews: []
};

const mutations = {
  // Add the visited route  ADD_VISITED_VIEW: (state: { visitedViews: any[] }, view: any) => {
    if (((v) =>  === )) return;
    (
      ({}, view, {
        title: 
      })
    );
  },
  // Add the visited route name  ADD_CACHED_VIEW: (state: { cachedViews: any[] }, view: { name: string }) => {
    if (()) return;
    ();
  },

  // Delete the current route  DEL_VISITED_VIEW: (
    state: { visitedViews: any[] },
    view: { path: string }
  ) => {
    for (const [i, v] of ()) {
      if ( === ) {
        (i, 1);
        break;
      }
    }
  },
  // Delete the current route name  DEL_CACHED_VIEW: (state: { cachedViews: any[] }, view: { name: string }) => {
    const index = ();
    index > -1 && (index, 1);
  },

  // Delete routes outside the current route  DEL_OTHERS_VISITED_VIEWS: (
    state: { visitedViews: any[] },
    view: { path: string }
  ) => {
     = ((v) => {
      return  ||  === ;
    });
  },
  // Delete routes outside the current route name  DEL_OTHERS_CACHED_VIEWS: (
    state: { cachedViews: any[] },
    view: { name: string }
  ) => {
    const index = ();
    if (index > -1) {
       = (index, index + 1);
    } else {
       = [];
    }
  },

  // Delete all accessed routes  DEL_ALL_VISITED_VIEWS: (state: { visitedViews: any[] }) => {
    const affixTags = ((tag) => );
     = affixTags;
  },
  // Delete all accessed routes name  DEL_ALL_CACHED_VIEWS: (state: { cachedViews: any[] }) => {
     = [];
  }
};

const actions = {
  // Add the visited route  addVisitedView ({ commit }: { commit: any }, view: any) {
    commit('ADD_VISITED_VIEW', view);
  },
  // Add the visited route name  addCachedView ({ commit }: { commit: any }, view: any) {
    commit('ADD_CACHED_VIEW', view);
  },
  addView ({ dispatch }: { dispatch: any }, view: any) {
    dispatch('addVisitedView', view);
    dispatch('addCachedView', view);
  },

  // Delete the current route  delVisitedView ({ commit }: { commit: any }, view: any) {
    commit('DEL_VISITED_VIEW', view);
  },
  // Delete the current route name  delCachedView ({ commit }: { commit: any }, view: any) {
    commit('DEL_CACHED_VIEW', view);
  },
  delView ({ dispatch }: { dispatch: any }, view: any) {
    dispatch('delVisitedView', view);
    dispatch('delCachedView', view);
  },

  // Delete routes outside the current route  delOthersVisitedViews ({ commit }: { commit: any }, view: any) {
    commit('DEL_OTHERS_VISITED_VIEWS', view);
  },
  // Delete routes outside the current route name  delOthersCachedViews ({ commit }: { commit: any }, view: any) {
    commit('DEL_OTHERS_CACHED_VIEWS', view);
  },
  delOthersViews ({ dispatch }: { dispatch: any }, view: any) {
    dispatch('delOthersVisitedViews', view);
    dispatch('delOthersCachedViews', view);
  },

  // Delete all accessed routes  delAllVisitedViews ({ commit }: { commit: any }) {
    commit('DEL_ALL_VISITED_VIEWS');
  },
  // Delete all accessed routes name  delAllCachedViews ({ commit }: { commit: any }) {
    commit('DEL_ALL_CACHED_VIEWS');
  },
  delAllViews ({ dispatch }: { dispatch: any }, view: any) {
    dispatch('delAllVisitedViews', view);
    dispatch('delAllCachedViews', view);
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions
};

// 
const getters = {
  // The page tags visited  visitedViews: (state: any) => ,
  // The page tag to visit is named  cachedViews: (state: any) => 
};
export default getters;

import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from '@/views/login/';
import Layout from '@/layout/';

(VueRouter);

/**
  * hidden means whether it needs to appear in the side navigation bar, true means it does not need to be
  * isFirst means whether there is only one level of permissions, only appears in only one subset, and no other grandchildren sets
  * When permissions have multiple subsets or grandchild sets, first-level permissions need to add meta
  * The secondary permissions have a subset, and must also have meta
  */

// Basic routingexport const constantRoutes = [
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect/')
      }
    ]
  },
  {
    path: '/',
    redirect: '/dashboard',
    hidden: true
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
    hidden: true
  },
  {
    path: '/dashboard',
    component: Layout,
    redirect: '/dashboard/index',
    isFirst: true,
    children: [
      {
        path: 'index',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/'),
        meta: {
          title: 'front page',
          icon: 'el-icon-location'
        }
      }
    ]
  }
];

// Dynamic routingexport const asyncRoutes = [
  {
    path: '/form',
    component: Layout,
    redirect: '/form/index',
    isFirst: true,
    children: [
      {
        path: 'index',
        name: 'Form',
        component: () => import('@/views/form/'),
        meta: {
          title: 'Form',
          role: 'form',
          icon: 'el-icon-location'
        }
      }
    ]
  },
  {
    path: '/editor',
    component: Layout,
    redirect: '/editor/index',
    meta: {
      role: 'editors',
      title: 'Total Rich Text',
      icon: 'el-icon-location'
    },
    children: [
      {
        path: 'index',
        name: 'Editor',
        component: () => import('@/views/editor/'),
        meta: {
          title: 'Rich text',
          role: 'editor',
          icon: 'el-icon-location'
        }
      },
      {
        path: 'two',
        name: 'Two',
        redirect: '/editor/two/three',
        component: () => import('@/views/editor/'),
        meta: {
          title: 'Second-level navigation',
          role: 'two',
          icon: 'el-icon-location'
        },
        children: [
          {
            path: 'three',
            name: 'Three',
            component: () => import('@/views/editor/'),
            meta: {
              title: 'Level 3 Navigation',
              role: 'three',
              icon: 'el-icon-location'
            }
          },
          {
            path: 'four',
            name: 'Four',
            component: () => import('@/views/editor/'),
            meta: {
              title: 'Level 3 Navigation 2',
              role: 'four',
              icon: 'el-icon-location'
            }
          }
        ]
      }
    ]
  },
  {
    path: '/tree',
    component: Layout,
    redirect: '/tree/index',
    isFirst: true,
    children: [
      {
        path: 'index',
        name: 'Tree',
        component: () => import('@/views/tree/'),
        meta: {
          title: 'Tree diagram',
          role: 'tree',
          icon: 'el-icon-location'
        }
      }
    ]
  },
  {
    path: '/excel',
    component: Layout,
    redirect: '/excel/index',
    isFirst: true,
    children: [
      {
        path: 'index',
        name: 'Excel',
        component: () => import('@/views/excel/'),
        meta: {
          title: 'Import and Export',
          role: 'excel',
          icon: 'el-icon-location'
        }
      }
    ]
  }
];

// The route that jumped in errorexport const error = [
  // 404
  {
    path: '/404',
    component: () => import('@/views/error/'),
    hidden: true
  },
  {
    path: '*',
    redirect: '/404',
    hidden: true
  }
];

const createRouter = () =>
  new VueRouter({
    scrollBehavior: () => ({
      x: 0,
      y: 0
    }),
    routes: constantRoutes
  });

const router = createRouter();

// Refresh the routeexport function resetRouter () {
  const newRouter = createRouter();
  (router as any).matcher = (newRouter as any).matcher;
}

export default router;

<!-- Generally used on the main layout page -->
<template>
  <div class="layout">
     ......
    <el-container :class="{ hideSidebar: isCollapse }">
      ......
      <!-- Subject content -->
      <el-main>
        <!-- Visited routing tags -->
        <tags-view></tags-view>
        <keep-alive :include="cachedViews">
          <router-view :key="$" />
        </keep-alive>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { mapGetters } from 'vuex';
import SubMenu from '@/components/SubMenu/';
import MyBreadcrumb from '@/components/Breadcrumb/';
import TagsView from '@/components/TagsView/';
import { resetRouter } from '@/router';

export default ({
  computed: {
    //Route    ...mapGetters(['cachedViews'])
  },
  components: {
    TagsView
  }
});
</script>