配置主页面
/store/getters.js 加入 cachedViews

const getters = {
  name: state => state.app.name,
  routers: state => state.routers.routers,
  cachedViews: state => state.tabs.cachedViews
}
export default getters

创建src/layout/components/AppMain.vue

<template>
  <el-scrollbar style="height: 100%;">
    <router-view v-slot="{ Component }">
      <transition>
        <keep-alive v-if="$route.meta.keepAlive" :include="cachedViews">
          <component :is="Component" />
        </keep-alive>
        <component :is="Component" v-else />
      </transition>
    </router-view>
  </el-scrollbar>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      return this.$store.getters.cachedViews
    }
  }
}
</script>

引用AppMain信心

//src/layout/components/index.js
export { default as AppMain } from './AppMain'
//src/layout/index.vue
...
        <!-- 主页面 -->
        <el-main>
          <app-main />
        </el-main>
      </el-container>
...
import { Navbar, Sidebar, Tabs, AppMain } from './components/'
...
components: {
    Sidebar,
    Navbar,
    Tabs,
    AppMain
  },

重构src/router/index.js

export const routes = [
  {
    path: '/',
    component: Layout,
    name: 'Home',
    meta: {
      title: '首页'
    },
    redirect: '/home',
    alwaysShow: true, // 只有一个子菜单时仍显示父级菜单
    children: [
      {
        path: 'home',
        name: 'Home',
        meta: { title: '主页', affix: true },
        component: () => import('@/views/home/index')
      }
    ]
  },
  {
    path: '/dog',
    component: Layout,
    name: 'Dog',
    meta: {
      title: '狗子世界'
    },
    children: [
      {
        path: '/erha',
        name: 'Erha',
        meta: {
          title: '哈士奇',
          keepAlive: true
        },
        component: () => import('@/views/dog/erha')
      },
      {
        path: '/jinmao',
        name: 'Jinmao',
        meta: {
          title: '金毛',
          keepAlive: true
        },
        component: () => import('@/views/dog/jinmao')
      },
      {
        path: '/taidi',
        name: 'Taidi',
        meta: {
          title: '泰迪',
          keepAlive: true
        },
        component: () => import('@/views/dog/taidi')
      }
    ]
  }
]

创建四个对应的测试文件
src/views/home/home.vue
src/views/dog/Jinmao.vue
src/views/dog/Erha.vue
src/views/dog/Taidi.vue
响应代码检测风格，name 采用驼峰形式。首字母大写，这里对应router里的name,匹配上的才会缓存
index.vue

<template>
  <el-row>
    这里是主页
  </el-row>
</template>

<script>
// 模块化的调用
export default {
  name: 'Home'
}
</script>

erha.vue

<template>
  <div>
    <el-col>信息： {{ erha.name }}</el-col>
    <el-col>年龄：{{ erha.age }} </el-col>
    <el-col><el-button type="primary" @click="erha.age++">年龄增加</el-button></el-col>
  </div>
</template>
<script>
export default {
  name: 'Erha',
  data() {
    return {
      erha: {
        name: '二哈',
        age: 10
      }
    }
  }
}
</script>

jinmao.vue

<template>
  <div>
    <el-col>信息： {{ jinmao.name }}</el-col>
    <el-col>年龄：{{ jinmao.age }} </el-col>
    <el-col><el-button type="primary" @click="jinmao.age++">年龄增加</el-button></el-col>
  </div>
</template>
<script>
export default {
  name: 'Jinmao',
  data() {
    return {
      jinmao: {
        name: '金毛',
        age: 10
      }
    }
  }
}
</script>

taidi.vue

<template>
  <div>
    <el-col>信息： {{ taidi.name }}</el-col>
    <el-col>年龄：{{ taidi.age }} </el-col>
    <el-col><el-button type="primary" @click="taidi.age++">年龄增加</el-button></el-col>
  </div>
</template>
<script>
export default {
  name: 'Taidi',
  data() {
    return {
      taidi: {
        name: '泰迪',
        age: 10
      }
    }
  }
}
</script>

配置完后 meta 的keepAlive属性 将决定哪个页面会被缓存。

主页这里显示不是很好，可以优化一下

src/layout/compoents/Sidebar.vue 加入 主页连接的判断
这里只是简单的优化一下。根据redirect 属性识别是否为单级菜单
redirect本来是用于重定向的。但是重定向后，存在菜单激活颜色问题，
激活的是/home, 而不是/，这里暂时没有去适配。
路由的处理应该在 src/store/modules/router.js 进行加工。

        <div v-for="(item, i) in routers" :key="i">
            <el-submenu v-if="item.children && !item.redirect" :index="item.path" class="hide-tile">
              <template #title>
                <i class="el-icon-sunny" />
                <span>{{ item.meta.title }}</span>
              </template>
              <el-menu-item v-for="(children, index) in item.children" :key="index" :index="item.path + '/' +children.path">{{ children.meta.title }}</el-menu-item>
            </el-submenu>
            <el-menu-item v-else :index="item.redirect ? item.redirect : item.path">
              <i class="el-icon-menu" />
              <template #title>{{ item.meta.title }}</template>
            </el-menu-item>
          </div>

src/layout/compoents/Navbar.vue 加入主页判断

    getBreadcrumb() {
      // 获取路由对应title   && 存在返回右边，不存在返回左边
      const matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
      if (this.levelList[0].path === '/') this.levelList = [this.levelList[0]]
    }

最终结果：

开启了缓存的页面切换不会进行重新加载

主页面的配置结束。已经可以进行后台业务的开发了。

接下来将配置：路径拦截（路由守卫），登录页面、以及权限。图标库的制作。有时间我再更新。