vue-admin-template 配置快捷导航

871714854

已于 2023-03-10 17:17:37 修改

阅读量672

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端 vue

于 2022-12-01 16:56:17 首次发布

本文链接：https://blog.csdn.net/m0_38094015/article/details/128134337

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

配置快捷导航

复制vue-element-admin中的文件到template

复制vue-element-admin中的文件到template

在这里插入图片描述

修改对应文件

@/layout/components/AppMain.vue添加：

<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: {
   /**修改部分**/
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
  /*****/
    key() {
      return this.$route.path
    }
  }
}
</script>

@/layout/components/index.js 添加：

export { default as TagsView } from './TagsView'

@/layout/index.vue 添加：
@/store/getters.js 添加：

  visitedViews: state => state.tagsView.visitedViews,
  cachedViews: state => state.tagsView.cachedViews,
  permission_routes: state => state.permission.routes

@/store/index.js：

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)

const modulesFiles = require.context('./modules', true, /\.js$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  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

移除国际化

在src/layout/components/TabsView 等文件夹中移除 this.t(‘route.xxxx’)，t 使用国际化的方式。
src/layout/components/TabsView/index.vue 改为中文

<template>
  <div id="tags-view-container" class="tags-view-container">
    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
      <router-link
        v-for="tag in visitedViews"
        ref="tag"
        :key="tag.path"
        :class="isActive(tag)?'active':''"
        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
        tag="span"
        class="tags-view-item"
        @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
        @contextmenu.prevent.native="openMenu(tag,$event)"
      >
        {{ tag.title }}
        <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
      </router-link>
    </scroll-pane>
    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
      <li @click="refreshSelectedTag(selectedTag)">刷新</li>
      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭当前</li>
      <li @click="closeOthersTags">关闭其他</li>
      <li @click="closeAllTags(selectedTag)">关闭全部</li>
    </ul>
  </div>
</template>

复制路由

@/src/view/redirect 到template

修改路由 @/src/router/index.js

可以从admin中找到复制过来

在这里插入图片描述

监听页面刷新 TagsView/index.vue 中添加方法

beforeUnload() {
// 监听页面刷新
window.addEventListener(“beforeunload”, () => {
// visitedViews数据结构太复杂无法直接JSON.stringify处理，先转换需要的数据
let tabViews = this.visitedViews.map(item => {
return {
fullPath: item.fullPath,
hash: item.hash,
meta: { …item.meta },
name: item.name,
params: { …item.params },
path: item.path,
query: { …item.query },
title: item.title
};
});
sessionStorage.setItem(“tabViews”, JSON.stringify(tabViews));
});
// 页面初始化加载判断缓存中是否有数据
let oldViews = JSON.parse(sessionStorage.getItem(“tabViews”)) || [];
if (oldViews.length > 0) {
this.$store.state.tagsView.visitedViews = oldViews;
}
},
在这里插入图片描述