配置主页面
/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]]
}
最终结果：
开启了缓存的页面切换不会进行重新加载
主页面的配置结束。已经可以进行后台业务的开发了。
接下来将配置：路径拦截（路由守卫），登录页面、以及权限。图标库的制作。有时间我再更新。
