vue 面包屑导航 ,页面缓存功能
1.动态的面包屑导航可以使用store控制数据,先创建一个tagsview.jsconst tagsview = {state: {visitedviews: [], //存放所有浏览过的且不重复的路由数据},mutations: { //这ADD_VISITED_VIEWS: (state, view) => { //打开新页签--添...
·
1.动态的面包屑导航可以使用store控制数据,先创建一个tagsview.js
const tagsview = {
state: {
visitedviews: [], //存放所有浏览过的且不重复的路由数据
},
mutations: { //这
ADD_VISITED_VIEWS: (state, view) => { //打开新页签--添加路由数据的方法
if (state.visitedviews.some(v => v.path == view.path)) return;
state.visitedviews.push({
name: view.name,
path: view.path,
title: view.meta.title || 'no-title'
})
},
DEL_VISITED_VIEWS: (state, view) => { //关闭页签--删除路由数据的方法
for (let [i, v] of state.visitedviews.entries()) {
if (v.path == view.path) {
state.visitedviews.splice(i, 1)
break
}
}
}
},
actions: { //调用这里去触发mutations,如何调用?在组件内使用this.$store.dispatch('action中对应名字', 参数)
addVisitedViews({
commit
}, view) { //通过解构赋值得到commit方法
commit('ADD_VISITED_VIEWS', view) //去触发ADD_VISITED_VIEWS,并传入参数
},
delVisitedViews({
commit,
state
}, view) { //删除数组存放的路由之后,需要再去刷新路由,这是一个异步的过程,需要有回掉函数,所以使用并返回promise对象,也可以让组件在调用的时候接着使用.then的方法
//commit('DEL_VISITED_VIEWS',view)
return new Promise((resolve) => { //resolve方法:未来成功后回掉的方法
commit('DEL_VISITED_VIEWS', view);
resolve([...state.visitedviews]);
})
}
}
}
export default tagsview
2.在store.js文件中引入模块tagsview
import Vue from 'vue'
import Vuex from 'vuex'
import tagsview from './tagsview'
Vue.use(Vuex);
const getters = {
visitedviews: state => state.tagsview.visitedviews,
};
export default new Vuex.Store({
modules: {
tagsview
},
getters
})
3.创建一个文件TagsView.vue
<template id="">
<div class="tags-view-container" v-show='visitedViews.length>0'>
<div class="tags-view-wrap">
<router-link v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path" class="tags-view-item"
:class="isActive(tag)?'active':''">
{{tag.title}}
<span class="el-icon-circle-close-outline" @click.prevent.stop="delSelectTag(tag)"></span>
</router-link>
</div>
</div>
</template>
<script>
export default {
computed: {
visitedViews() {
//store中取值
return this.$store.state.tagsview.visitedviews;
}
},
methods: {
isActive(route) {
return route.path == this.$route.path;
},
addViewTags() {
//路由改变时执行的方法
console.log(this.$route);
if (this.$route.name) {
const route = this.$route;
this.$store.dispatch("addVisitedViews", route);
}
},
delSelectTag(route) {
//先提交删除数据的方法,数组删除出掉数据后,如果关闭的是当前打开的路由需要将路由改为数组最后一次push进去的路由
this.$store.dispatch("delVisitedViews", route).then(views => {
if (this.isActive(route)) {
//只有在关闭当前打开的标签页才会有影响
let lastView = views.slice(-1)[0]; //选取路由数组中的最后一位
if (lastView) {
this.$router.push(lastView);
} else {
this.$router.push("/");
}
}
});
}
},
watch: {
$route() {
this.addViewTags();
}
}
};
</script>
<style scoped>
.tags-view-wrap {
background: #efeef0;
position: absolute;
top: 10px;
left: 20px;
width: 100%;
height: 30px;
overflow: hidden;
}
.tags-view-wrap .tags-view-item {
height: 30px;
line-height: 30px;
display: inline-block;
color: #fff;
background-color: #409EFF;
padding: 0 3px;
border-radius: 5px;
margin: 0 3px;
}
.tags-view-wrap .tags-view-item:hover {
color: rgb(221, 247, 5);
}
.tags-view-wrap .active {
color: rgb(221, 247, 5);
}
</style>
4.配置路由文件参数router.js
{
path: '/index',
name: 'index',//需要配置name,
component: resolve => require(['../components/xxx.vue'], resolve),
meta: {
title: 'xxx',
keepAlive: true, //控制页面缓存参数
}
}
5.在主页面将TagsView.vue按组件引入,
<template>
<div class="content-box">
<el-container class="box">
<div class="content">
<el-main class="main">
<tags></tags>
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 这里是会被缓存的视图组件 -->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件-->
</router-view>
</el-main>
</div>
</el-container>
</div>
</template>
<script>
import tags from '../components/xx/TagsView.vue';
export default {
components: {
tags,
},
data() {
return {
}
},
methods: {
},
computed: {
}
}
</script>
添加页面缓存
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 这里是会被缓存的视图组件 -->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件-->
</router-view>
更多推荐
已为社区贡献3条内容
所有评论(0)