Iview-admin: 请教各位大佬以及作者，动态路由生成的菜单切换tab页时，页面内容会刷新

Created on 23 Jan 2018 · 17Comments · Source: iview/iview-admin

在切换至动态路由生成的菜单时，tab页内容会刷新；切换至原来写死在router.js中的路由打开的tab页不会刷新。
小弟求解，如何才能切换至动态路由生成的菜单打开的tab页也不刷新呢！ @lison16

Source

LSmile1994

Most helpful comment

在vue实例里把name加上，对应router里的

LouisGo on 2 Feb 2018

👍2 🚀1 ❤1

All 17 comments

我是使用的addRoutes更新的路由，

                    this.getRequest('/menu/menuDataByUser').then(resp=>{
                        var menus = resp.data;
                        localStorage.setItem("menuItem",JSON.stringify(menus));//把菜单数据保存至localstorage
                        var router_arr = this.getMenuItem(menus);//解析菜单数据getMenuItem方法在下方

                        let tagsList = [];
                        router_arr.map((item) => {
                            if (item.children.length <= 1) {
                                tagsList.push(item.children[0]);
                            } else {
                                tagsList.push(...item.children);
                            }
                        });
                        this.$router.addRoutes(router_arr);
                        this.$store.commit('updateMenulist',router_arr);//更新菜单列表
                        this.$store.commit('setTagsList', tagsList);//把获取的菜单，添加到store/modules/app中tagsList，util.js中openNewPage用到。
                        this.$store.commit('setRouters',router_arr);//把路由添加到store的app中的router中去。
                        this.$router.push({
                            name: 'otherRouter'
                        });
                    });

getMenuItem方法如下：

    getMenuItem(data) {//解析菜单数据
        let yjMenuList= data.yjMenu;//一级菜单
        let ejMenuList= data.ejMenu;//二级菜单
        let router_arr = [];//路由数据

        for(let i=0;i<yjMenuList.length;i++) {
            let yj = yjMenuList[i];
            let child_arr = [];
            for( let j=0;j<ejMenuList.length;j++) {
                let ej = ejMenuList[j];
                if(yj.ZYID === ej.SJZYID) {
                    let path = ej.ZYLJ;
                    child_arr.push(
                        {
                            path: ej.TITLE,
                            title: ej.ZYMC,
                            name: yj.TITLE+"_"+ej.TITLE,
                            component: resolve => { require(['@/views/'+path+'.vue'], resolve); }
                        }
                    );
                }
            }
            router_arr.push(
                {
                    path: '/'+yj.TITLE,
                    icon: 'key',
                    name: yj.TITLE,
                    title: yj.ZYMC,
                    component: resolve => { require(['@/views/Main.vue'], resolve); },
                    children:child_arr
                }
            );
        }
        return router_arr;
    },

LSmile1994 on 23 Jan 2018

对我也有这个问题在一个页面编辑好数据切换tab后数据就会丢失

cantinzing on 24 Jan 2018

@LSmile1994 动态生成的路由在进入某个tab路由后是404吗

wangjun0868 on 1 Feb 2018

在vue实例里把name加上，对应router里的

LouisGo on 2 Feb 2018

👍2 🚀1 ❤1

@LouisGo 感谢，问题终于解决了。原来我之前的name一直不对应

LSmile1994 on 2 Feb 2018

@LSmile1994 能否看看你的动态路由我的菜单是根据登陆Id获取的

codeItachi on 3 Feb 2018

@LSmile1994 请问您编译时不会报错吗:
component: resolve => { require(['@/views/'+path+'.vue'], resolve); }

linziguan on 25 Feb 2018

@codeItachi 根据什么获取的无妨，主要是你获取到菜单集合之后要进行相应的解析，我的解析菜单代码如下
getRouterItem(data){
let yjMenuList= data.yjMenu;//一级菜单
let ejMenuList= data.ejMenu;//二级菜单
let sjMenuList= data.sjMenu;//三级菜单
let router_arr = [];//路由数据

        for(let i=0;i<yjMenuList.length;i++) {
            let yj = yjMenuList[i];
            let child_arr = [];
            for( let j=0;j<ejMenuList.length;j++) {
                let ej = ejMenuList[j];
                if(yj.ZYID === ej.SJZYID) {
                    let path = ej.ZYLJ;//二级菜单的路径
                    let child_child_arr = []//三级路由的集合
                    for( let n = 0;n<sjMenuList.length;n++){
                        let sj = sjMenuList[n];
                        if(ej.ZYID === sj.SJZYID){
                            let child_path = sj.ZYLJ;
                            child_child_arr.push(
                                {
                                    path: sj.TITLE,
                                    title: sj.ZYMC,
                                    name: sj.TITLE,
                                    component: resolve => { require(['@/views/'+child_path+'.vue'], resolve); }
                                }
                            );
                        }
                    }
                    if (child_child_arr.length>0) {
                        router_arr.push(
                            {
                                path: ej.TITLE,
                                title: ej.ZYMC,
                                name: ej.TITLE,
                                component: resolve => { require(['@/views/Main.vue'], resolve); },
                                children:child_child_arr
                            }
                        );
                    }else{
                        child_arr.push(
                            {
                                path: ej.TITLE,
                                title: ej.ZYMC,
                                name: ej.TITLE,
                                component: resolve => { require(['@/views/'+path+'.vue'], resolve); }
                            }
                        );
                    }
                }
            }
            router_arr.push(
                {
                    path: '/'+yj.TITLE,
                    icon: 'key',
                    name: yj.TITLE,
                    title: yj.ZYMC,
                    component: resolve => { require(['@/views/Main.vue'], resolve); },
                    children:child_arr
                }
            );
        }
        return router_arr;
    },

LSmile1994 on 1 Mar 2018

@linziguan 你看下我上面发的这个解析菜单的内容，我这么写解析不会报错的

LSmile1994 on 1 Mar 2018

@LSmile1994 当页面手动刷新的时候，动态路由怎么处理？