Home页面补充历史访问记录

实现效果

实现方法

每次点击菜单时，在路由导航守卫，把访问的记录存储下来，在home页面，读取这个记录用来展示数据。
标签使用elemplus的标签进行使用。

1.展示标签

使用element标签组件

https://element-plus.org/zh-CN/component/tabs.html

  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="User" name="first">User</el-tab-pane>
    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
  </el-tabs>

2.ProStore增加记录及添加记录的方法

在ProStore中，增加一个值tag，用于存储历史访问信息

增加一个方法，用于添加tags

3.路由导航守卫存储历史访问的路由信息

这里可以给每一个需要存储的路径设置meta属性

可以看到在proStore中，存储好了路径。

4. 在Tag读取数据循环显示

使用v-for循环展示pStore中存储的标签

	<el-tabs :model-value="activeName" class="demo-tabs" @tab-click="handleClick">
		<div v-for="item in pstore.tag">
	    	<el-tab-pane :label="item.name" :name="item.path"></el-tab-pane>
		</div>
	</el-tabs>

展示没有问题，但是点击对应标签，没有跳转到对应的页面。

5.点击标签跳转对应页面

选中标签时，触发页面跳转就行了。

	function handleClick(ele){
		// console.log(ele)
		router.push(ele.props.name)
	}

点标签可以页面跳转，但是点左边菜单栏，标签没有对应更改

6. 标签激活绑定

<el-tabs :model-value="$route.path" class="demo-tabs" @tab-click="handleClick" type="card">

把model-value值动态绑定为当前的路径

7.关闭标签

判断标签是当前路劲的，就不展示关闭按钮，如果不是就展示关闭按钮

实质就是从proStore中移除对应的tag

在proStore中添加删除方法

//移除标签
delTags(path){
	this.tags = this.tags.filter( item =>{
		return item.path != path
	})
}

总结

使用到的内容，主要是element的标签组件

https://element-plus.org/zh-CN/component/tabs.html#tabs-api

还有v-if判断，v-for循环，pinia使用，vue-router页面跳转等