基于vuex,keep-aliv实现的多标签页

标签: 多标签页  vuex  keep-alive  vue  js  es6

基于vuex,keep-alive的多标签页

本人前端实习菜鸡一名,发出的东西都是项目中的一些疑难问题,虽然实现出来了需求,但是代码有些繁琐,希望大佬们多多指教,废话不多说先上图。

略显简介,不过这样更直观

先安装vuex

npm
npm install vuex --save
yarn
yarn add vuex --save
新建文件夹用来存放vuex代码

vuex代码文件

创建index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        loginhash: '',
        // 状态
        worktab: {
            // 已打开的标签页
            list: [],
            // 当前选中的标签页
            current: {}
        },
        closingPage: ''
    },
    mutations: {
        // 做快速登录用的
        loginhash2 (state, hash) {
            state.loginhash = hash;
            Vue.ls.set('loginhash', hash);
        },
        // 关闭标签
        biaoqianRemove (state, p) {
            // 从list中查找要关闭标签页的索引值
            const ind = state.worktab.list.findIndex(s => s.key === p.key);
            if (ind > -1) {
                if (p === state.worktab.current) {
                    // 是当前页,返回上一页
                    if (state.worktab.list.indexOf(p) === 0) {
                        state.worktab.list.splice(ind, 1);
                        if (state.worktab.list.length === 0) {
                            // 当标签页删除完的回调,此处我是添加了一个监听 在别的页面
                        } else {
                            history.go(-1);
                        }
                    } else {
                        history.go(-1);
                        state.worktab.list.splice(ind, 1);
                    }
                } else {
                    state.worktab.list.splice(ind, 1);
                }
            }
        },
        // 添加标签页
        addBiaoqian (state, p) {
            const ind = state.worktab.list.findIndex(s => s.key === p.key);
            if (ind > -1) {
                // 标签已存在 则让当前面板选中
                state.worktab.current = state.worktab.list[ind];
            } else {
                // 标签不存在,现在新建,并且选中
                state.worktab.list.push(p);
                state.worktab.current = p;
            }
        },
        // 刷新选中
        addbiaoqian (state, p) {
            state.worktab.list = p;
        }
    },
    actions: {
        biaoqianRemove ({ commit }, p) {
            commit('biaoqianRemove', p);
        },
        addBiaoqian ({ commit }, p) {
            commit('addBiaoqian', p);
        },
        addbiaoqian ({ commit }, p) {
            commit('addbiaoqian', p);
        }
    }
});

export default store;

在mani.js中import 并挂载

import store from './store';

new Vue({
    router,
    store: store,
    render: h => h(App)
}).$mount('#app');

左侧导航栏(ant Design Vue)

<template>
    <div>
        <div v-if="ifShow">
            <a-menu
                mode="inline"
                :style="{ height: '100%', borderRight: 0 }"
                :defaultOpenKeys="mrdk"
                :defaultSelectedKeys="mrxz"
            >
                <a-sub-menu
                    v-for="a in yijicaidan"
                    :key="a.key"
                >
                    <span slot="title">
                        <a-icon type="a.icon" />{{ a.title }}
                    </span>

                    <a-menu-item
                        v-for="b in a.sub"
                        :key="b.key"
                        @click="tiaozhuan(b)"
                    >
                        <a-icon type="b.icon" />{{ b.title }}
                    </a-menu-item>
                </a-sub-menu>
            </a-menu>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Menu',
    data () {
        return {
            // 默认选中的导航栏
            mrxz: [],
            // 默认打开的导航栏面板
            mrdk: [],
            // 这个地方是因为路由嵌套的问题,添加的一个重新渲染
            ifShow: true,
            list: [],
            yijicaidan: [
                {
                    title: '系统设置',
                    icon: 'setting', // 一级菜单 icon
                    key: '1', // 索引(必须唯一,是字符串)
                    sub: [// 子菜单(二级菜单)
                        {
                            title: '首页', // 菜单名称
                            path: '/setting/index', // 点击跳转的路由
                            key: '11',
                            name: 'index'
                        },
                        { title: '账户设置', path: '/setting/zhanghu', key: '12', name: 'zhanghu' }
                    ]
                },
                {
                    title: 'srbac',
                    icon: 'setting',
                    key: '2',
                    sub: [
                        {
                            title: 'srbac角色',
                            path: '/srbac/jueseguanli',
                            key: '21',
                            name: 'jueseguanli'
                        },
                        { title: 'srbac资源', path: '/srbac/ziyuanGuanli', key: '22', name: 'ziyuanGuanli' }
                    ]
                },
                {
                    title: 'rbac',
                    icon: 'setting',
                    key: '3',
                    sub: [
                        {
                            title: 'rbac角色',
                            path: '/rbac/juese',
                            key: '31',
                            name: 'juese'
                        },
                        { title: 'rbac资源', path: '/rbac/ziyuan', key: '32', name: 'ziyuan' }
                    ]
                }
            ]
        };
    },
    methods: {
        tiaozhuan (b) {
            // 调用index.js 中的addBiaoqian 方法来添加标签页
            this.$store.dispatch('addBiaoqian', b);
            // 路由跳转
            this.$router.push({ path: b.path });
            if (!window.localStorage.biaoqian) {
                const c = [];
                c.push(b);
                window.localStorage.setItem('biaoqian', JSON.stringify(c));
            } else {
                const a = JSON.parse(window.localStorage.getItem('biaoqian'));
                const d = a.findIndex(s => s.key === b.key);
                if (d > -1) {
                    //
                } else {
                    a.push(b);
                    window.localStorage.setItem('biaoqian', JSON.stringify(a));
                }
            }
        },
        // 左侧导航栏刷新默认选中
        getUrl () {
            const url = this.$route.path;
            for (const a of this.yijicaidan) {
                for (const b of a.sub) {
                    if (b.path === url) {
                        this.mrxz.push(b.key);
                        this.mrdk.push(a.key);
                        console.log('默认选中数组', this.mrxz);
                    }
                }
            }
        }
    },
    mounted () {
        this.getUrl();
    },
    watch: {
        // 监听网址变化
        $route (to, from) {
            console.log(to.fullPath);
            for (const a of this.yijicaidan) {
                for (const b of a.sub) {
                    if (b.path === to.fullPath) {
                        console.log('2222222222222222222222222222222222222222222', to.fullPath);
                        this.mrxz = [];
                        this.mrdk = [];
                        this.mrxz.push(b.key);
                        this.mrdk.push(a.key);
                        console.log('监听默认选中', this.mrxz);
                        this.ifShow = false;
                        this.$nextTick(() => {
                            this.ifShow = true;
                        });
                    }
                }
            }
        }
    }
};
</script>

<style scoped>

</style>

标签页

<template>
    <div>
        <a-tabs
            @change="callback"
            type="editable-card"
            v-model="activeKey"
            @edit="onEdit"
        >
            <a-tab-pane
                v-for="pane in panes"
                :tab="pane.title"
                :key="pane.key"
            >
            </a-tab-pane>
        </a-tabs>
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
    </div>
</template>
<script>
export default {
    name: 'RouteView',
    computed: {
        panes () {
            return this.$store.state.worktab.list;
        },
        closingPage () {
            return this.$store.state.worktab.closingPage;
        }
    },
    mounted () {
        this.getBiaoqian();
        this.selBiaoqian();
    },
    data () {
        return {
            activeKey: '',
            index: 0
        };
    },
    methods: {
        // 刷新保留标签
        getBiaoqian () {
            const a = JSON.parse(window.localStorage.getItem('biaoqian'));
            this.$store.dispatch('addbiaoqian', a);
        },
        // 刷新选中
        selBiaoqian () {
            console.log(this.$route.path);
            const c = this.$route.path;
            for (const a of this.$store.state.worktab.list) {
                if (a.path === c) {
                    this.$store.dispatch('addBiaoqian', a);
                }
            }
        },
        // 标签切换回调
        callback (e) {
            const list = this.$store.state.worktab.list;
            for (const a of list) {
                if (a.key === e) {
                    this.$router.push({ path: a.path });
                }
            }
        },
        // 点击 x 关闭标签回调
        onEdit (e) {
            // const list = this.$store.state.worktab.list;
            for (const a of this.$store.state.worktab.list) {
                if (a.key === e) {
                    this.$store.dispatch('biaoqianRemove', a);
                    // 删除本地存储的标签
                    const b = JSON.parse(window.localStorage.getItem('biaoqian'));
                    for (const c of b) {
                        if (c.key === e) {
                            b.splice(this.index, 1);
                            window.localStorage.setItem('biaoqian', JSON.stringify(b));
                            this.index = 0;
                            return;
                        }
                        this.index = this.index + 1;
                    }
                }
            }
        }
    },
    watch: {
        // 监听$store.state.worktab.current 来选中打开面板
        '$store.state.worktab.current' (tab) {
            console.log('this.$store.state.worktab.current1', this.$store.state.worktab.current);
            if (tab.length === 0) {
                this.activeKey = null;
            } else {
                this.activeKey = tab.key;
            }
        },
        // 监听url地址 来选中标签 或者添加
        $route (to, from) {
            for (const a of this.$store.state.worktab.list) {
                if (a.path === to.fullPath) {
                    this.$store.dispatch('addBiaoqian', a);
                }
            }
        },
        // 监听$store.state.worktab.list 当为空时返回  /
        '$store.state.worktab.list' (tab) {
            console.log('this.$store.state.worktab.list', this.$store.state.worktab.list);
            if (tab.length === 0) {
                this.$router.push('/');
            }
        }
    }
};
</script>
<style scoped>

</style>

实现原理:基于vuex的数据响应式,点击左侧的导航栏跳转路由并且向index.js中传入标签页的key/title,在标签页中再从index.js中取出标签页需要的key/title来渲染页面,其中刷新保存标签页是widow. storage做的,还有在最后一个页面关闭的时候需要做跳转到指定页面的回调。

还有就是怎样取消keep-alive缓存问题,哪位大佬会麻烦教一下,哈哈哈,查了查没弄明白,我的路由是动态引入的。

版权声明:本文为weixin_45201775原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45201775/article/details/105400147

智能推荐

2018.8.27

2018.8.27...

HTML 表单元素的基本样式

HTML 表单元素的基本样式 原创 ixygj197875 发布于2018-02-22 17:48:53 阅读数 2296 收藏 更新于2018-05-20 15:35:58 分类专栏: 揭秘 CSS 揭秘 CSS 收起 表单元素主要包括 label、input、textarea、select、datalist、******、progress、meter、output等,以及对表单元素进行分组的 ...

php输出语句

php输出语句 常见的输出语句 echo(): 可以一次输出多个值,多个值之间用逗号分隔。echo是语言结构(language construct),而并不是真正的函数,因此不能作为表达式的一部分使用。 print(): 函数print()打印一个值(它的参数),如果字符串成功显示则返回true,否则返回false。 print_r(): 可以把字符串和数字简单地打印出来,而数组则以括起来的键和值...

工厂模式

简介 常见的实例化对象模式。 用工厂方法替代new操作的一种模式。 当我们使用new操作实例化对象时,调用构造函数完成初始化。若初始化仅是进行赋值等简单的操作,写入构造函数即可。但如果初始化时需要执行一长串复杂的代码,将多个工作装入一个方法,是不妥的。 创建实例与使用实例分离。将创建实例所需的大量初始化工作从基类的构造函数中分离出去。 简单工厂模式、工厂方法模式针对的是一个产品等级结构;而抽象工厂...

B1105 Spiral Matrix (画图)

B1105 Spiral Matrix (25分) //第一次只拿了21分 矩阵的长和宽,求最大因子,从sqrt(num)开始枚举. 每次循环一次,s++,t--,d--,r++ 测试点四运行超时,是因为输入一个数字的时候,需要直接输出这个数字。//1分 测试点二运行超时,最后一个数字不必再while循环一次,直接输出即可。//3分 最后一个测试点卡了好久/(ㄒoㄒ)/~~ 螺旋矩阵...

猜你喜欢

Java基础=>String,StringBuffer与StringBuilder的区别

字符串常量池 什么是字符串常量池? JVM为了减少字符串对象的重复创建,其维护了一块特殊的内存,这段内存被称为字符串常量池(存储在方法区中)。 具体实现 当代码中出现字符串时,JVM首先会对其进行检查。 如果字符串常量池中存在相同内容的字符串对象,如果有,则不再创建,直接返回这个对象的地址返回。 如果字符串常量池中不存在相同内容的字符串对象,则创建一个新的字符串对象并放入常量池,并返回新创建的字符...

java调用其他java项目的Https接口

项目中是这样的: 用户拿出二维码展示,让机器识别二维码, 机器调用开门的后台系统接口, 然后开门的后台系统接口需要调用管理系统的接口, 管理系统需要判断能不能开门.这两个系统是互相独立的.当时使用http调用是没有问题的.当时后来要求必须用https.废话不说,直接代码: 我的项目中调用的是 HttpsUtils.Get(utlStr) 这个接口 开门系统接口如下图:   管理系统的接口...

Hadoop1.2.1全分布式模式配置

一 集群规划 主机名            IP                               安装的软件 &nbs...

Go语言gin框架的安装

尝试安装了一下gin,把遇到的一些小问题来记录一下 安装步骤 首先来看看官方文档,链接点这里 可以看到安装步骤很简单,就一句话 在命令行中输入这句话运行等待就好。 问题来了,因为墙的问题,go get会很慢,所以命令行里面半天什么反应也没有,不要急,慢慢等着就会看到gin-gonic/gin这个目录出现 这个时候命令行还是没有结束,表示还在下一些东西。有的时候可能心急的人就停了(比如我),然后写个...

uni-app表单组件二

input(输入框) 属性名 类型 说明 平台差异 value String 输入框的初始内容 type String input 的类型 password Boolean(默认false) 是否是密码类型 placeholder String 输入框为空时占位符 placeholder-style String 指定 placeholder 的样式 placeholder-class Strin...