使用addRoutes()方法添加路由后，为什么我Home页面的导航栏却没有刷出来？

Question

最近在做动态的菜单栏，但是发现VUE在生成实例的时候已经把router加载了，但是我想在用户登录之后，从后台的数据库里面查询到其拥有的菜单权限，然后返回到前端去动态加载路由，随后发现网上说vue-router2.2之后的addRoutes()是可以实现这个功能的，随机试了一下，但是出现了写问题，希望大神提点
我想现在前端测试下addRoutes()可以实现否，就打算手动给他传一个路由格式的内容，看看能不能行
我在main.js里面调用addRoutes()方法

const router = new VueRouter({   //全局变量router：routes
  mode:'history',
  routes
})

var a = [];
a.push(
       {
             path: '/',
             component: require('@/views/Home.vue'),
             name: '系统设置',
             iconCls: 'fa fa-cogs',
             children: [
                   { path: '/roleSetting', pri:['R_ADMIN','R_TRA','R_LAN','R_WAT','R_ENT'],component: require('@/views/systemSetting/roleSetting.vue'), name: '角色管理' }
             ]
        },
            {
        path: '/404',
        component: require('@/views/404.vue'),
        name: '',
        hidden: true
    },
    {
        path: '*',
        hidden: true,
        redirect: { path: '/404' }
    }
);
router.addRoutes(a);

router.beforeEach((to, from, next) => {

  //console.log('main.js '+to.path);

  if(!Vue.prototype.$userInfo || !Vue.prototype.$token){
    var c  = getCookie('userInfo');
    var ct  =   getCookie('token');
    if(c&&c!="")  Vue.prototype.$userInfo = JSON.parse(c);
    if(ct&&ct!="")  Vue.prototype.$token = ct;

    console.log('before route');
    console.log(Vue.prototype.$userInfo);
    console.log(Vue.prototype.$token);
  }


  if(to.path == '/login'){
    delete Vue.prototype.$userInfo;
    delete Vue.prototype.$token;
    delCookie('token','userInfo');
  }

  var token = getCookie('token');
  if( to.path != '/login' && token=="")
      next({ path: '/login' })
  else
      next()
})

router.afterEach(transition => {
// NProgress.done();
});

new Vue({
  //el: '#app',
  //template: '<App/>',
  router,
  store,
  //components: { App }
  render: h => h(App)
}).$mount('#app')

我的routes.js

import Login from './views/Login.vue'
import Home from './views/Home.vue'
let routes = [
    {
        path: '/login',
        component: Login,
        name: '',
        hidden: true
    },
    {
        path: '/',
        component: Home,
        name: '',
        iconCls: 'fa fa-home',
        leaf: true,//只有一个节点
        children: [
            { path: '/index', component: Index, name: '首页' }
        ]
    }
]
export default routes;

原来的菜单栏只有首页一个，我通过addRoutes()添加了一个系统设置的菜单，刷新菜单栏之后应该有首页和系统设置这两个菜单，但为什么我新添加的系统设置这个菜单是没有的呢？
我的Home.js

<aside :class="collapsed?'menu-collapsed':'menu-expanded'">
                <!--导航菜单-->
                <el-menu :default-active="$route.path" class="newMenu" @open="handleopen" @close="handleclose" @select="handleselect"
                     unique-opened router v-if="!collapsed"  id="sidebar-hook">
                    <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
                        <el-submenu :index="index+''" v-if="!item.leaf">
                            <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
                            <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden &&child.pri&& child.pri.indexOf($userInfo.roleType)!=-1">{{child.name}}</el-menu-item>
                        </el-submenu>
                        <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
                    </template>
                </el-menu>
                <!--导航菜单-折叠后-->
                <ul class="el-menu el-menu-vertical-demo collapsed" v-show="collapsed" ref="menuCollapsed">
                    <li v-for="(item,index) in $router.options.routes" v-if="!item.hidden" class="el-submenu item">
                        <template v-if="!item.leaf">
                            <div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"><i :class="item.iconCls"></i></div>
                            <ul class="el-menu submenu  submenu-scroll-hook" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"> 
                                <li v-for="child in item.children" v-if="!child.hidden" :key="child.path" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">{{child.name}}</li>
                            </ul>
                        </template>
                        <template v-else>
                            <li class="el-submenu">
                                <div class="el-submenu__title el-menu-item" style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;" :class="$route.path==item.children[0].path?'is-active':''" @click="$router.push(item.children[0].path)"><i :class="item.iconCls"></i></div>
                            </li>
                        </template>
                    </li>
                </ul>
            </aside>

运行程序之后，发现菜单栏没有变化，但是手动输入添加的地址是可以跳转到页面的

Answer 1

1.addroute已经成功了，所以可以跳转到新增的路由页。
2.渲染menu不应该遍历路由去生成，因为addroutes后，路由虽然增加了，但路由不是响应数据（未观察，且未订阅），是不会对你的视图触发变化的。

建议解决方案：
使用vuex，对路由信息进行状态管理，把初始的路由数据存到store里，menu依靠store进行渲染及更新，addroutes后再把新增路由push进store存储的路由数组中，即可以触发menu更新。希望能解决你的问题。

Answer 2

// store 里面 把 根据权限过滤的异步路由和不需要权限的路由结合在一起，组成新的
SET_ROUTERS: (state, routers) => {
  state.addRouters = routers
  state.routers = constantRouterMap.concat(routers)
}

//view/layout/component/sildbar/index.js
// 替换
<sidebar-item v-for="route in routers" :key="route.name" :item="route" :base-path="route.path"/>

// 引入
...mapGetters([
  'sidebar',
  'routers'
]),

Answer 3

addroutes只是在路由里加了新的路由，也就是你可以通过url跳转，并不是个你添加新的菜单，加新的菜单还需要你自己根据权限判断，写代码处理

Answer 4

你好，我也是显示不出来，我看了，你才用楼上说法，已经解决了，我看明白了，但是这些方法我都不会用，可以给我看看代码！[e-mail]，谢谢