比如有管理员和用户两者权限，不希望从数据库Api端加载，因为两者菜单是固定的，这时候可以定义用户和管理员两个router路由配置文件

如在router路由文件夹下面创建
clientrouter.js
adminrouter.js
index.js

这时候希望登陆用户加载cllientrouter配置，登陆的是admin就加载adminrouter

首先用户登陆的时候，返回token的同时，得返回一个判断权限的字段信息，这个自己处理就可以了

router/index.js代码如下：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)



export default new Router({
  routes: [
    { path: '/login',name: 'login', component:  () => import('@/views/login/index') },
    { path: '/404', component: () => import('@/views/404'), hidden: true }
  ]
})

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

export const adminmenu = [
  { path: '/404', component: () => import('@/views/404'), hidden: true },
  {
    path: '/admin/client',
    component: Layout,
    children: [
      {
        path: 'list',
        component: () => import('@/views/admin/client/list'),
        meta: { title: '用户管理', icon: 'table' }
      }
    ]
  },
  {
    path: '/admin/phototype',
    component: Layout,
    meta: { title: '案例分类管理', icon: 'table' },
    children: [
      {
        path: 'add',
        component: () => import('@/views/admin/phototype/add'),
        meta: { title: '添加分类', icon: 'table' }
      },
      {
        path: 'list',
        name:"admin_phototype_list",
        component: () => import('@/views/admin/phototype/list'),
        meta: { title: '资源分类管理', icon: 'table' }
      }
    ]
  },
  { path: '*', redirect: '/404', hidden: true },
]

export const createRouter = () => new Router({
   mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: adminmenu
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function logout() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router/index'

import '@/icons' // icon
import '@/permission' // permission control


import  {adminmenu} from '@/router/adminrouter';
import  {clientmenu} from '@/router/clientrouter';
/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}

// set ElementUI lang to EN
Vue.use(ElementUI)
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
  created() {  
    //一旦刷新浏览器就会执行这里
    //下面这段代码在实际开发中应该封装起来，因为在登陆的时候也会用到
    //登陆成功则在cookie中设置对应的token值，然后执行类似下面的代码
    //注意：这里的this.$router.addRoutes是vue-router2.2版本后才有的方法
           if(this.$store.state.admin.author!=''){
                switch (this.$store.state.admin.author){
                  case 'admin':
                    //this.$router.options.addRoutes(adminmenu);
                    //这里必须同时使用如下两句，一开始我单独使用的一句，怎么试都渲染不了路由，百度了许久，两个同时使用得已解决
                    router.options.routes=adminmenu//配置管理员路由
                    router.addRoutes(adminmenu)//动态加载路由
                    break;
                  case 'client':
                    router.options.routes=clientmenu//配置管理员路由
                    router.addRoutes(clientmenu)//动态加载路由
                    break;
                  default:
                    break;
                }
          }else{
            router.push({ name: 'login'})
      } 
    }
})

• 本文标题： Vue根据用户权限加载router路由文件
• 文章分类：【VueJS】
• 非特殊说明，本文版权归【胡同里的砖头】个人博客 所有，转载请注明出处.

• 上一篇：vscode中yarn : 无法加载文件XXX\npm\yarn.ps1，因为在此系统上禁止运行脚本。
• 下一篇： vue之v-for循环表格里面读取不到this.对象