elementui el-menu router跳转方式传递参数

最近再做一个后台管理项目，权限控制到用户可以操作的页面按钮，获取用户按钮需要菜单的moduleId，那么逻辑就是：在点击菜单的时候加载子页面并且把菜单的moduleId带过来

        <el-menu
                class="el-menu-vertical-demo"
                background-color="#fff"
                text-color="#222"
                unique-opened
                active-text-color="deepskyblue"
                :collapse="isCollapse"
                :collapse-transition="false"
                router //指定router,通过index绑定的值来跳转
                :default-active="defaultActivePath"
                >
            <el-submenu :index="item.moduleName" 
                        v-for="item in menus" 
                        :key="item.moduleName">
                <template slot="title">
                    <i :class="item.moduleIcon"></i>
                    <span>{{item.moduleName}}</span>
                </template>
                <el-menu-item 
                    v-for="subItem in item.children"
                	:index="subItem.moduleCode" //要跳转的路由地址
                    @click="changeDefaultActivePath(subItem.moduleCode)"
                    :route={path:subItem.moduleCode,query:{moduleId:subItem.moduleId}}  //通过route传递路由对象将参数传递过去
                    :key="subItem.moduleName">
                    <template slot="title">
                        <i :class="subItem.moduleIcon"></i>
                        <span>{{subItem.moduleName}}</span>
                    </template>
                </el-menu-item>
            </el-submenu>
        </el-menu>

在子页面里面的获取方式

this.$route.query.moduleId;

一开始我没有看到这个属性，浪费了好多时间去尝试其他方式，传递参数是成功了但是有奇奇怪怪的bug。。。