Vue实现TagView标签导航栏缓存，解决重新进去页面不刷新问题(vue slot标签)

Vue实现TagView标签导航栏缓存，解决重新进去页面不刷新问题 实现的效果图

推荐整理分享Vue实现TagView标签导航栏缓存，解决重新进去页面不刷新问题(vue slot标签)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue tabs标签页,vue中的标签,vue slot标签,vue的title,vue tab标签页,vue的title,vue标签中怎么写表达式,vue中的标签,内容如对您有帮助，希望把文章链接给更多的朋友！

一、先实现导航栏的效果1、先在@/layout/components/Sidebar目录下新建一个组件ScrollPane.vue，把下面代码复制进去<template> <div ref="scrollContainer" class="scroll-container" @wheel.prevent="handleScroll"> <div ref="scrollWrapper" class="scroll-wrapper" :style="{left: left + 'px'}"> <slot /> </div> </div></template><script>const padding = 15 // tag's paddingexport default { name: 'ScrollPane', data() { return { left: 0 } }, methods: { handleScroll(e) { const eventDelta = e.wheelDelta || -e.deltaY * 3// wheelDelta:-120;deltaY:-120 const $container = this.$refs.scrollContainer// 外面的container const $containerWidth = $container.offsetWidth// 外面的container的宽度 const $wrapper = this.$refs.scrollWrapper// 里面 const $wrapperWidth = $wrapper.offsetWidth// 里面的宽度 if (eventDelta > 0) { this.left = Math.min(0, this.left + eventDelta)// min() 方法可返回指定的数字中带有最低值的数字。 } else { if ($containerWidth - padding < $wrapperWidth) { if (this.left < -($wrapperWidth - $containerWidth + padding)) { this.left = 1 } else { this.left = Math.max(this.left + eventDelta, $containerWidth - $wrapperWidth - padding) } } else { this.left = 0 } } }, moveToTarget($target) { const $container = this.$refs.scrollContainer const $containerWidth = $container.offsetWidth const $targetLeft = $target.offsetLeft const $targetWidth = $target.offsetWidth if ($targetLeft < -this.left) { // tag in the left this.left = -$targetLeft + padding } else if ($targetLeft + padding > -this.left && $targetLeft + $targetWidth < -this.left + $containerWidth - padding) { // tag in the current view // eslint-disable-line } else { // tag in the right this.left = -($targetLeft - ($containerWidth - $targetWidth) + padding) } } }}</script><style rel="stylesheet/scss" lang="scss" scoped> .scroll-container { white-space: nowrap; position: relative; overflow: hidden; width: 100%; .scroll-wrapper { position: absolute; } }</style>2、在相同目录下再新建一个TagsView.vue组件，把下面代码复制进去<template> <div class="tags-view-container"> <scroll-pane ref="scrollPane" class="tags-view-wrapper"> <router-link v-for="tag in Array.from(visitedViews)" ref="tag" :key="tag.path" :class="isActive(tag)?'active':''" :to="tag" class="tags-view-item" @contextmenu.prevent.native="openMenu(tag,$event)" > {{ tag.title }} <span class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" /> </router-link> </scroll-pane> <ul v-show="visible" class="contextmenu" :style="{left:left+'px',top:top+'px'}"> <li @click="closeSelectedTag(selectedTag)">关闭</li> <li @click="closeOthersTags">关闭其他</li> <li @click="closeAllTags">关闭所有</li> </ul> </div></template><script>import ScrollPane from './ScrollPane.vue'export default { name: 'TagsView', components: { ScrollPane }, data() { return { visible: false, top: 0, left: 0, selectedTag: {} } }, computed: { visitedViews() { return this.$store.state.tagsView.visitedViews } }, watch: { $route() { this.addViewTags() this.moveToCurrentTag() }, visible(value) { if (value) { document.body.addEventListener('click', this.closeMenu) } else { document.body.removeEventListener('click', this.closeMenu) } } }, mounted() { this.addViewTags() }, methods: { generateRoute() { if (this.$route.name) { return this.$route } return false }, isActive(route) { return route.path === this.$route.path }, addViewTags() { const route = this.generateRoute() if (!route) { return false } this.$store.dispatch('addVisitedViews', route) }, moveToCurrentTag() { const tags = this.$refs.tag this.$nextTick(() => { for (const tag of tags) { if (tag.to.path === this.$route.path) { this.$refs.scrollPane.moveToTarget(tag.$el) break } } }) }, closeSelectedTag(view) { this.$store.dispatch('delVisitedViews', view).then((views) => { if (this.isActive(view)) { const latestView = views.slice(-1)[0] if (latestView) { this.$router.push(latestView) } else { this.$router.push('/') } } }) }, closeOthersTags() { this.$router.push(this.selectedTag) this.$store.dispatch('delOthersViews', this.selectedTag).then(() => { this.moveToCurrentTag() }) }, closeAllTags() { this.$store.dispatch('delAllViews') this.$router.push('/') }, openMenu(tag, e) { this.visible = true this.selectedTag = tag const offsetLeft = this.$el.getBoundingClientRect().left // container margin left this.left = e.clientX - offsetLeft + 15 // 15: margin right this.top = e.clientY }, closeMenu() { this.visible = false } }}</script><style rel="stylesheet/scss" lang="scss" scoped> .tags-view-container { .tags-view-wrapper { background: #fff; height: 34px; border-bottom: 1px solid #d8dce5; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); .tags-view-item { display: inline-block; position: relative; height: 26px; line-height: 26px; border: 1px solid #d8dce5; color: #495060; background: #fff; padding: 0 8px; font-size: 12px; margin-left: 5px; margin-top: 4px; &:first-of-type { margin-left: 15px; } &.active { background-color: #42b983; color: #fff; border-color: #42b983; &::before { content: ''; background: #fff; display: inline-block; width: 8px; height: 8px; border-radius: 50%; position: relative; margin-right: 2px; } } } } .contextmenu { margin: 0; background: #fff; z-index: 100; position: absolute; list-style-type: none; padding: 5px 0; border-radius: 4px; font-size: 12px; font-weight: 400; color: #333; box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); li { margin: 0; padding: 7px 16px; cursor: pointer; &:hover { background: #eee; } } } }</style><style rel="stylesheet/scss" lang="scss"> //reset element css of el-icon-close .tags-view-wrapper { .tags-view-item { .el-icon-close { width: 16px; height: 16px; vertical-align: 2px; border-radius: 50%; text-align: center; transition: all .3s cubic-bezier(.645, .045, .355, 1); transform-origin: 100% 50%; &:before { transform: scale(.6); display: inline-block; vertical-align: -3px; } &:hover { background-color: #b4bccc; color: #fff; } } } }</style>3、在store文件夹下新建一个tagsView.js，同样把复制代码进去const tagsView = { state: { visitedViews: [], cachedViews: [] }, mutations: { ADD_VISITED_VIEWS: (state, view) => { if (state.visitedViews.some(v => v.path === view.path)) return state.visitedViews.push(Object.assign({}, view, { title: view.meta.title || 'no-name' })) if (!view.meta.noCache) { state.cachedViews.push(view.name) } }, DEL_VISITED_VIEWS: (state, view) => { for (const [i, v] of state.visitedViews.entries()) { if (v.path === view.path) { state.visitedViews.splice(i, 1) break } } for (const i of state.cachedViews) { if (i === view.name) { const index = state.cachedViews.indexOf(i) state.cachedViews.splice(index, 1) break } } }, DEL_OTHERS_VIEWS: (state, view) => { for (const [i, v] of state.visitedViews.entries()) { if (v.path === view.path) { state.visitedViews = state.visitedViews.slice(i, i + 1) break } } for (const i of state.cachedViews) { if (i === view.name) { const index = state.cachedViews.indexOf(i) state.cachedViews = state.cachedViews.slice(index, i + 1) break } } }, DEL_ALL_VIEWS: (state) => { state.visitedViews = [] state.cachedViews = [] } }, actions: { addVisitedViews({ commit }, view) { commit('ADD_VISITED_VIEWS', view) }, delVisitedViews({ commit, state }, view) { return new Promise((resolve) => { commit('DEL_VISITED_VIEWS', view) resolve([...state.visitedViews]) }) }, delOthersViews({ commit, state }, view) { return new Promise((resolve) => { commit('DEL_OTHERS_VIEWS', view) resolve([...state.visitedViews]) }) }, delAllViews({ commit, state }) { return new Promise((resolve) => { commit('DEL_ALL_VIEWS') resolve([...state.visitedViews]) }) } }}export default tagsView4、在store/index.js中引入tagsView.jsimport Vue from 'vue'import Vuex from 'vuex'import getters from './getters'// 自定义模块import app from './modules/app'import settings from './modules/settings'import user from './modules/user'import permission from './modules/permission'import tagsView from './modules/tagsView'Vue.use(Vuex)const store = new Vuex.Store({ modules: { app, settings, user, permission, tagsView }, getters})export default store5、在@/layout/的主组件中引入TagsView组件

二、实现重新返回页面时不刷新，保留原本页面内容1、在@/layout/components/Sidebar下的AppMain.vue中添加如下代码

主要是通过keep-alive 和 router-view结合来实现

<template> <section class="app-main"> <transition name="fade-transform" mode="out-in"> <keep-alive :include="cachedViews"> //这是新增加的 <router-view :key="key" /> </keep-alive> // </transition> </section></template><script>export default { name: 'AppMain', computed: { key() { return this.$route.path }, cachedViews() {//这是新增加的 return this.$store.state.tagsView.cachedViews }// }}</script>2、在route/index.js中为页面路由添加keepAlive为true，例如在首页 { path: '/', component: Layout, redirect: '/dashboard', children: [{ path: 'dashboard', name: 'Dashboard', component: () => import('@/views/dashboard/index'), //在meta对象中添加key值keepAlive为true meta: { title: '首页', icon: 'dashboard' ,keepAlive:true} }] }3、还有一点很重要！！要确保组件的命名和路由的命名是一样的，不然页面不会保留原本内容，会进行自动刷新

4、退出登录时，要清除缓存可以在store/modules/user.js中添加如下代码import store from '..'// user logout logout({ commit, state }) { return new Promise((resolve, reject) => { logout().then(() => { removeToken() resetRouter() store.dispatch('delAllViews') //增加多这行 commit('RESET_STATE') resolve() }).catch(error => { reject(error) }) }) },最后，这是项目的目录结构，红色框是新建的文件，蓝色是修改增加的文件