vueaddRoutes实现动态权限路由菜单的示例-创新互联

需求

创新互联是一家集网站建设,龙湖企业网站建设,龙湖品牌网站建设,网站定制,龙湖网站建设报价,网络营销,网络优化,龙湖网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

最近接手一个后台管理系统，需要实现导航菜单从后台拉取的效果；根据登录用户的权限不同分别拉出来的导航菜单也不一样，另外可操作的界面也存在区别。

问题

因为后台管理系统是准备使用vue+vue-router+element-ui+vuex的搭配来做的，可是单页应用在进入页面之前就已经将vue-router实例化并且注入vue实例中了，所以在进入登录页面的时候旧没办法在重新定制路由了。接下来各种百之谷之，发现vue-router在2.0版本中提供了addRoutes方法添加路由，希望的曙光出现。

经过一番折腾终于实现了功能，记录下来便于回顾，也希望能帮助到同样有需求的同志。

思路

1、首先在本地配置好固定不变的路由地址，例如登录，404这些页面，如下:

import Vue from 'vue'
import Router from 'vue-router'
import store from '@/vuex/store'
Vue.use(Router)

let router = new Router({
 routes: [
  {
   path: '/login',
   name: 'login',
   meta: {requireAuth: false},
   // 模块使用异步加载
   component: (resolve) => require(['../components/login/login.vue'], resolve)
  }]
})
// 拦截登录，token验证
router.beforeEach((to, from, next) => {
 if (to.meta.requireAuth === undefined) {
  if (store.state.token) {
   next()
  } else {
   next({
    path: '/login'
   })
  }
 } else {
  next()
 }
})
export default router

本文名称：vueaddRoutes实现动态权限路由菜单的示例-创新互联
本文地址：http://bjjierui.cn/article/cejdco.html