1、單頁模式改多頁模式

1、從vue-element-admin-master中的store/modules下，拷貝tagsView.js到對應(yīng)目錄下，

vue-admin-template\src\layout\components\TagsView 文件夾

2、修改 vue-admin-template\src\layout\components\AppMain.vue ：AppMain.vue文件，修改如下：

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <!-- <router-view :key="key" />-->
      <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.fullPath
    }
  }
}
</script>

<style lang="scss" scoped>
.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    min-height: calc(100vh - 84px);
  }

  .fixed-header+.app-main {
    padding-top: 84px;
  }
}
</style>

<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
  .fixed-header {
    padding-right: 15px;
  }
}
</style>

3、修改vue-admin-template\src\layout\components\index.js，新增如下行

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

4、在 vue-admin-template\src\layout\index.vue 文件中 新增 tagsview標簽

<template>
  <div :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
      </div>
      <tags-view />    <!-- 此處增加tag-->
      <app-main />
    </div>
  </div>
</template>

import { Navbar, Sidebar, AppMain,TagsView } from './components'

components: {
    Navbar,
    Sidebar,
    AppMain,
    TagsView //新增
},

5、修改store/index.js

import 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 tagsView from './modules/tagsView'  //新增

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user,
    tagsView   //新增
  },
  getters
})

export default store

6、修改store/getters.js

const getters = {
    sidebar: state => state.app.sidebar,
    device: state => state.app.device,
    token: state => state.user.token,
    avatar: state => state.user.avatar,
    name: state => state.user.name,
    visitedViews: state => state.tagsView.visitedViews, //新增
    cachedViews: state => state.tagsView.cachedViews  //新增
}
export default getters

7、修改vue-admin-template\src\settings.js 添加

tagsView: true,

8、修改vue-admin-template\src\store\modules\settings.js

const { showSettings, fixedHeader, sidebarLogo,tagsView } = defaultSettings

const state = {
  showSettings: showSettings,
  tagsView: tagsView, //此處新增
  fixedHeader: fixedHeader,
  sidebarLogo: sidebarLogo
}

9、改動后發(fā)現(xiàn)報routes錯誤，原因是單頁版本的state存儲的是menu，改成routes就可以了，網(wǎng)絡(luò)上給出的直接刪除掉個人感覺不可取

routes() {
    return this.$store.state.user.routes
}

主要內(nèi)容均轉(zhuǎn)自：https://www.cnblogs.com/windok/p/10890715.html