最近在做動態(tài)的菜單欄，但是發(fā)現(xiàn)VUE在生成實例的時候已經(jīng)把router加載了，但是我想在用戶登錄之后，從后臺的數(shù)據(jù)庫里面查詢到其擁有的菜單權(quán)限，然后返回到前端去動態(tài)加載路由，隨后發(fā)現(xiàn)網(wǎng)上說vue-router2.2之后的addRoutes()是可以實現(xiàn)這個功能的，隨機試了一下，但是出現(xiàn)了寫問題，希望大神提點
我想現(xiàn)在前端測試下addRoutes()可以實現(xiàn)否，就打算手動給他傳一個路由格式的內(nèi)容，看看能不能行
我在main.js里面調(diào)用addRoutes()方法

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

var a = [];
a.push(
       {
             path: '/',
             component: require('@/views/Home.vue'),
             name: '系統(tǒng)設(shè)置',
             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,//只有一個節(jié)點
        children: [
            { path: '/index', component: Index, name: '首頁' }
        ]
    }
]
export default routes;

原來的菜單欄只有首頁一個，我通過addRoutes()添加了一個系統(tǒng)設(shè)置的菜單，刷新菜單欄之后應(yīng)該有首頁和系統(tǒng)設(shè)置這兩個菜單，但為什么我新添加的系統(tǒng)設(shè)置這個菜單是沒有的呢？
我的Home.js

<aside :class="collapsed?'menu-collapsed':'menu-expanded'">
                <!--導(dǎo)航菜單-->
                <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>
                <!--導(dǎo)航菜單-折疊后-->
                <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>

運行程序之后，發(fā)現(xiàn)菜單欄沒有變化，但是手動輸入添加的地址是可以跳轉(zhuǎn)到頁面的