此案例主要实现了一个功能是，在vue实例首次运行时，在加载了login和404两个路由规则，登录成功后，根据登录用户角色权限获取该角色相应菜单权限，生成新的路由规则添加进去。

做过后台管理系统都一定做过这个功能，在对菜单权限进行粗粒度权限控制的时候，通过角色获取菜单后，异步生成菜单，所以一开始拿到需求的时候，我也以为这和平常的没什么不同，不过做起来就发现了很多问题，

1.vue-router的实例，在new vue实例的时候，就加载了，且必须加载，这个时候，登录路由一定要加载，可是这个时候没有登录，无法确定权限
2.路由规则与菜单的同步

解决思路演化，菜单和路由同步，肯定是采用了vuex，一开始的思路的是，在一开始，就把所有的路由规则加载，然后在登录的时候，取得权限路由，对比两个路由，通过修改修改一个权限字段来隐藏菜单，如果在后台页面添加了新菜单规则，路由是按模块加载的不同的文件，这时对路由的文件进行新的读写，虽然可以解决问题，但是如果手动在浏览器地址上路由，依然可以访问，所以在路由的全局钩子上还要做拦截。

这个解决方案虽然解决，但是显的比较复杂，于是就想需找新的方法，重新浏览官方api，发现在2.2.0以后，官方新增了api，addRoutes，专门针对服务端渲染路由，那么这下问题就比较简单了，下面列出实现代码。以下代码不能直接复用，需要根据实际情况修改，只是提供思路

app.js

let permission = JSON.parse(window.sessionStorage.getItem('permission')) 
if (permission) { 
 store.commit(ADD_MENU, permission) 
 router.addRoutes(store.state.menu.items) 
} 
router.beforeEach((route, redirect, next) => { 
 if (state.app.device.isMobile && state.app.sidebar.opened) { 
  store.commit(TOGGLE_SIDEBAR, false) 
 } 
 if (route.path === '/login') { 
  window.sessionStorage.removeItem('user') 
  window.sessionStorage.removeItem('permission') 
  store.commit(ADD_MENU, []) 
 } 
 let user = JSON.parse(window.sessionStorage.getItem('user')) 
 if (!user && route.path !== '/login') { 
  next({ path: '/login' }) 
 } else { 
  if (route.name) { 
   next() 
  } else { 
   next({ path: '/nofound' }) 
  } 
 } 
}) 

登录的组件login.vue

<template> 
 <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" 
      class="demo-ruleForm login-container"> 
  <h3 class="title">系统登录</h3> 
  <el-form-item prop="account"> 
   <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input> 
  </el-form-item> 
  <el-form-item prop="checkPass"> 
   <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input> 
  </el-form-item> 
  <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox> 
  <el-form-item style="width:100%;"> 
   <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录 
   </el-button> 
   <!--<el-button @click.native.prevent="handleReset2">重置</el-button>--> 
  </el-form-item> 
 </el-form> 
</template> 
 
<script> 
 import NProgress from 'nprogress' 
 import { mapActions, mapGetters } from 'vuex' 
 export default { 
  data () { 
   return { 
    logining: false, 
    ruleForm2: { 
     account: 'admin', 
     checkPass: '123456' 
    }, 
    rules2: { 
     account: [ 
      {required: true, message: '请输入账号', trigger: 'blur'} 
      // { validator: validaePass } 
     ], 
     checkPass: [ 
      {required: true, message: '请输入密码', trigger: 'blur'} 
      // { validator: validaePass2 } 
     ] 
    }, 
    checked: true 
   } 
  }, 
  computed: { 
   ...mapGetters([ 
    'menuitems', 
    'isLoadRoutes' 
    // ... 
   ]) 
  }, 
  methods: { 
   handleReset2 () { 
    this.$refs.ruleForm2.resetFields() 
   }, 
   handleSubmit2 (ev) { 
    this.$refs.ruleForm2.validate((valid) => { 
     if (valid) { 
      this.logining = true 
      NProgress.start() 
      let loginParams = {loginName: this.ruleForm2.account, password: this.ruleForm2.checkPass} 
      this.$http.post('/api/privilege/user/login', loginParams).then(resp => { 
       this.logining = false 
       NProgress.done() 
       let {message, data} = resp.data 
 
       if (message === 'fail') { 
        this.$notify({ 
         title: '错误', 
         message: message, 
         type: 'error' 
        }) 
       } else { 
        window.sessionStorage.setItem('user', JSON.stringify(data.user)) 
        window.sessionStorage.setItem('permission', JSON.stringify(data.permission)) 
        this.addMenu(data.permission) 
        if (!this.isLoadRoutes) { 
         this.$router.addRoutes(this.menuitems) 
         this.loadRoutes() 
        } 
        this.$router.push('/system/office') 
       } 
      }) 
     } else { 
      console.log('error submit!!') 
      return false 
     } 
    }) 
   }, 
 
   ...mapActions([ 
    'addMenu', 
    'loadRoutes' 
   ]) 
  } 
 } 
 
</script> 
 
<style lang="scss" scoped> 
 .login-container { 
  /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/ 
  -webkit-border-radius: 5px; 
  border-radius: 5px; 
  -moz-border-radius: 5px; 
  background-clip: padding-box; 
  margin-bottom: 20px; 
  background-color: #F9FAFC; 
  margin: 180px auto; 
  border: 2px solid #8492A6; 
  width: 350px; 
  padding: 35px 35px 15px 35px; 
 
 .title { 
  margin: 0px auto 40px auto; 
  text-align: center; 
  color: #505458; 
 } 
 
 .remember { 
  margin: 0px 0px 35px 0px; 
 } 
 
 } 
</style> 

关键点解释

computed: { 
   ...mapGetters([ 
    'menuitems', 
    'isLoadRoutes' 
    // ... 
   ]) 
  }, 

这里是从vuex取得两个对象，menuitems是菜单对象，isLoadRoutes是用来判断是否是第一次登录，用来排除重复加载路由规则

...mapActions([ 
    'addMenu', 
    'loadRoutes' 
   ]) 

这里是从vuex取得两个方法，一个是添加菜单，一个更改loadRoutes的值

this.$router.addRoutes(this.menuitems) 

这是关键api，动态的向router实例中添加路由规则

menu模块的state与mutations

const state = { 
 items: [ 
 ], 
 isLoadRoutes: false 
} 
 
const mutations = { 
 [types.EXPAND_MENU] (state, menuItem) { 
  if (menuItem.index > -1) { 
   if (state.items[menuItem.index] && state.items[menuItem.index].meta) { 
    state.items[menuItem.index].meta.expanded = menuItem.expanded 
   } 
  } else if (menuItem.item && 'expanded' in menuItem.item.meta) { 
   menuItem.item.meta.expanded = menuItem.expanded 
  } 
 }, 
 [types.ADD_MENU] (state, menuItems) { 
  if (menuItems.length === 0) { 
   state.items = [] 
  } else { 
   generateMenuItems(state.items, menuItems) 
  } 
 }, 
 [types.LOAD_ROUTES] (state) { 
  state.isLoadRoutes = !state.isLoadRoutes 
 } 
} 

路由配置文件router.js

import Vue from 'vue' 
import Router from 'vue-router' 
import menuModule from 'vuex-store/modules/menu' 
Vue.use(Router) 
 
export default new Router({ 
 mode: 'hash', // Demo is living in GitHub.io, so required! 
 linkActiveClass: 'is-active', 
 scrollBehavior: () => ({ y: 0 }), 
 routes: [ 
  { 
   path: '/login', 
   component: require('../Login.vue'), 
   meta: { 
    expanded: false, 
    show: false 
   }, 
   name: 'Login' 
  }, 
  { 
   path: '/', 
   component: require('../views/Home.vue'), 
   meta: { 
    expanded: false, 
    show: false 
   }, 
   children: [ 
    { path: '/nofound', component: require('../404.vue'), name: 'NOFOUND', meta: {show: false} } 
   ] 
  }, 
  ...generateRoutesFromMenu(menuModule.state.items) 
 ] 
}) 
 
// Menu should have 2 levels. 
function generateRoutesFromMenu (menu = [], routes = []) { 
 for (let i = 0, l = menu.length; i < l; i++) { 
  let item = menu[i] 
  if (item.path) { 
   routes.push(item) 
  } 
 } 
 return routes 
} 

vuex

import Vue from 'vue' 
import Vuex from 'vuex' 
import * as actions from './actions' 
import * as getters from './getters' 
 
import menu from './modules/menu' 
 
Vue.use(Vuex) 
 
const store = new Vuex.Store({ 
 strict: true, // process.env.NODE_ENV !== 'development', 
 actions, 
 getters, 
 modules: { 
  menu 
 }, 
 mutations: { 
 } 
}) 
 
export default store 

actions

export const addMenu = ({ commit }, menuItems) => { 
 if (menuItems.length > 0) { 
  commit(types.ADD_MENU, menuItems) 
 } 
} 
 
export const loadRoutes = ({ commit }) => { 
 commit(types.LOAD_ROUTES) 
} 

getters

const menuitems = state => state.menu.items 
const isLoadRoutes = state => state.menu.isLoadRoutes 
export { 
 menuitems, 
 isLoadRoutes 
} 

mutations_type.js

export const ADD_MENU = 'ADD_MENU' 
 
export const LOAD_ROUTES = 'LOAD_ROUTES' 

因为上面的代码不能直接运行，再次梳理一下思路，

1.创建vue实例的时候，将vuex和vue-router加载，这个时候，vue-router只有登录规则和404规则

2.vuex中state管理的状态对象有，菜单对象menuitems，是否加载过路由loadRoutes ，并提供相应的getters与actions当然还有一些其他的，这里没有列举

3.然后在登录组件中，登录成功后，将服务端传回来之后，调用actions更改state.menuitems,并且中间有格式化的过程，这个过程的代码没有贴出来，主要是由于不同的表涉和服务端返回的数据不一样，，

4.然后调用addRoutes和actions更改已经加载过路由的方法

5.然后为了防止用户直接手动按f5刷新页面，这个时候会重新构建vue实例，而又没有重新登录，所以vuex里面的东西会清空，所以将登录后的数据存放在sessionStroage中，在刷新页面，重新构建vue实例的时候，会有判断

6.之后会渲染侧边栏组件，列出菜单，数据就可以根据state.menuitems来就可以了，我这里没有贴我的，实际根据自己的需求来

后面有时间会在github上上传完整代码。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue  # router  # addroutes  # vuerouter  # 路由动态加载  # vue使用动态添加路由(router.addRoutes)加载权限侧边栏的方式  # vue 解决addRoutes多次添加路由重复的操作  # vue addRoutes路由动态加载操作  # 使用VueRouter的addRoutes方法实现动态添加用户的权限路由  # vue动态添加路由addRoutes之不能将动态路由存入缓存的解决  # vue 解决addRoutes动态添加路由后刷新失效问题  # vue addRoutes实现动态权限路由菜单的示例  # vue-router4动态路由刷新404/白屏的解决  # vue访问未定义的路由时重定向404问题  # vue3动态路由刷新后空白或者404问题的解决  # vue 项目中当访问路由不存在的时候默认访问404页面操作  # vue 使用addRoutes动态添加路由及刷新页面跳转404路由的问题解决方案  # 加载  # 这个时候  # 服务端  # 是从  # 请输入  # 做过  # 就可以  # 自己的  # 的是  # 这是  # 我也  # 会有  # 放在  # 首次  # 其他的  # 会在  # 就把  # 要做  # 采用了  # 解决问题 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 实现点击下箭头变上箭头来回切换的两种方法【推荐】  高防服务器租用指南：配置选择与快速部署攻略  JS实现鼠标移上去显示图片或微信二维码  Windows11怎样设置电源计划_Windows11电源计划调整攻略【指南】  BootStrap整体框架之基础布局组件  javascript中数组（Array)对象和字符串（String)对象的常用方法总结  制作旅游网站html,怎样注册旅游网站？  HTML5空格和nbsp有啥关系_nbsp的作用及使用场景【说明】  Win11怎样安装网易有道词典_Win11安装词典教程【步骤】  Laravel Blade模板引擎语法_Laravel Blade布局继承用法  什么是JavaScript解构赋值_解构赋值有哪些实用技巧  如何在IIS中新建站点并解决端口绑定冲突？  Laravel如何获取当前登录用户信息_Laravel Auth门面使用与Session用户读取【技巧】  Laravel如何为API生成Swagger或OpenAPI文档  Laravel如何使用Eloquent进行子查询  百度输入法全感官ai怎么关 百度输入法全感官皮肤关闭  zabbix利用python脚本发送报警邮件的方法  Laravel Eloquent关联是什么_Laravel模型一对一与一对多关系精讲  Laravel如何将应用部署到生产服务器_Laravel生产环境部署流程  Google浏览器为什么这么卡 Google浏览器提速优化设置步骤【方法】  LinuxCD持续部署教程_自动发布与回滚机制  香港服务器WordPress建站指南：SEO优化与高效部署策略  如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗？  厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办？  Laravel怎么实现搜索高亮功能_Laravel结合Scout与Algolia全文检索【实战】  如何在万网主机上快速搭建网站？  标准网站视频模板制作软件,现在有哪个网站的视频编辑素材最齐全的，背景音乐、音效等？  音响网站制作视频教程,隆霸音响官方网站？  浅谈redis在项目中的应用  西安专业网站制作公司有哪些,陕西省建行官方网站？  PHP 500报错的快速解决方法  Android仿QQ列表左滑删除操作  Win11怎么恢复误删照片_Win11数据恢复工具使用【推荐】  Laravel如何发送邮件和通知_Laravel邮件与通知系统发送步骤  如何在Tomcat中配置并部署网站项目？  如何做网站制作流程,*游戏网站怎么搭建？  Laravel怎么使用Session存储数据_Laravel会话管理与自定义驱动配置【详解】  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  如何用腾讯建站主机快速创建免费网站？  Laravel如何处理表单验证？（Requests代码示例）  ChatGPT常用指令模板大全 新手快速上手的万能Prompt合集  详解Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点  如何在香港服务器上快速搭建免备案网站？  如何快速配置高效服务器建站软件？  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？  香港服务器部署网站为何提示未备案？  东莞专业网站制作公司有哪些,东莞招聘网站哪个好？  Laravel怎么自定义错误页面_Laravel修改404和500页面模板  如何用好域名打造高点击率的自主建站？  如何确认建站备案号应放置的具体位置？