vue实现页面顶部路由标签跳转

在页面使用

<!-- 活跃菜单 -->
									<div class="panel-group" ref="scrollPane" >
										<router-link ref="tag" :to="menu.path" v-for="(menu, idx) in activeRoutes"
											style="display: inline-block;">
											<div class="pannelItem" :class="menu.isAct == 1 ? 'actPannel' : ''">
												<div v-if="menu.isAct == 1" class="circule"></div>
												<div class="card-panel-description" style="text-wrap: nowrap;">
													{{ menu.name }}
												</div>
												<i @click.prevent.stop="delRoute(menu.name, idx)" class="el-icon-close"
													style="margin-left: 4px;"></i>
											</div>

										</router-link>
									</div>

computed: {
		...mapState({
			activeRoutes: state => state.permission.activeRoutes
		}),
	},

// 监听路由变化

watch: {
		$route(route) {
			const newRoute = {
				...route, // 复制原有的路由属性  
				name: route.name === 'dashboard' ? '首页' : (route.name == 'changePassword' ? '修改密码' : route.name), // 修改名称为 '首页' 如果是 'dashboard'  
				isAct: 1, // 设置活跃状态  
			};

			this.$store.dispatch('permission/addRoute', newRoute);
			this.moveToCurrentTag()

		},
	},

mounted() {

		// 查看当前页面路由 刷新后展示当前路由
		const currentRoute = this.$route || false

		if (currentRoute) {
			const newRoute = {
				...currentRoute, // 复制原有的路由属性  
				name: currentRoute.name === 'dashboard' ? '首页' : (currentRoute.name == 'changePassword' ? '修改密码' : currentRoute.name), // 修改名称为 '首页' 如果是 'dashboard'  
				isAct: 1, // 设置活跃状态  
			};
			this.$store.dispatch('permission/addRoute', newRoute);
		}

	},
methods: {

		// 关闭路由
		delRoute(name, idx) {
			if (idx == 0) {
				return
			}

            // 调用vuex模块中actions要用 ('模块名/方法')
			this.$store.dispatch('permission/removeRoute', name);
			const latestView = this.activeRoutes.slice(-1)[0];
			
            // 删除最后一个标签后前一个设为活跃标签
			if (latestView) {
				this.$router.push(latestView.path
				)
			} else {
				this.$router.push('/dashboard')
			}
		},

		// 超出后展示滚动条最后一项
		moveToCurrentTag() {
			this.$nextTick(() => {
				const scrollPane = this.$refs.scrollPane;
				if (scrollPane) {
					scrollPane.scrollLeft = scrollPane.scrollWidth; // 滚动到最后一项  
				}
			});

		},
}

样式

.panel-group {
	background-color: #fff;
	padding: 10px;
	margin-bottom: 10px;
	display: flex;
	max-width: 100%;
	/* 设置最大宽度 */
	overflow-x: auto;
	/* 允许水平滚动 */

	.pannelItem {
		background-color: #e6d8cc;
		color: #333;
		font-size: 14px;
		padding: 8px 10px;
		border-radius: 5px;
		margin-right: 10px;
		cursor: pointer;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}

	.actPannel {
		background-color: #aa8878;
		color: #fff;

	}

		.card-panel-description {
			float: right;
			font-size: 15px;
			font-weight: bold;
			margin: 26px;
			margin-left: 0px;

		
		}
	}
}

.circule {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #fff;
	margin-right: 5px;
}

store中新建modules模块 新建存储活跃路由文件permission.js

const state = {
	activeRoutes: [{
		name: '首页',
		path: '/dashboard',
		isAct: 1
	}]
}

const mutations = {
	SET_ROUTES: (state, routes) => {
		state.addRoutes = routes
		state.routes = constantRoutes.concat(routes)

	},

	ADD_ROUTE(state, route) {
		const existingRoute = state.activeRoutes.find(r => r.name === route.name);
		if (!existingRoute) {
			// 如果路由不存在，检查是否为 'dashboard'  
			if (route.name === 'dashboard') {
				route.name = '首页'; // 修改路由名称为 '首页'  
			}
			route.isAct = 1; // 设置活跃状态  
			state.activeRoutes.push(route); // 添加路由  
		} else {
			// 如果路由已存在，更新活跃状态  
			existingRoute.isAct = 1; // 更新活跃状态  
		}
		// 将其他不活跃的路由状态设置为 2  
		state.activeRoutes.forEach(r => {
			if (r.name !== route.name) {
				r.isAct = 2; // 设置不活跃状态为 2  
			}
		});

	},
	REMOVE_ROUTE(state, routeName) {
		// 移除指定的路由  
		state.activeRoutes = state.activeRoutes.filter(route => route.name !== routeName);
	},
}

const actions = {
	addRoute({ commit }, route) {
		commit('ADD_ROUTE', route);
	},
	removeRoute({ commit }, routeName) {
		commit('REMOVE_ROUTE', routeName);
	},

	
}

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

在store下getter.js中引入activeRoute

const getters = {
	activeRouter: state => state.permission.activeRouter,
}
export default getters

在store index.js中导出

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)



// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

export default store