vue-router+vuexaddRoutes实现路由动态加载及菜单动态加载

版权申诉

106 浏览量 2020-11-26 15:00:50 上传评论收藏 73KB PDF 举报

资源推荐

资源详情

资源评论

vue-router+vuex addRoutes实现路由动态加载及菜单动态加实现路由动态加载及菜单动态加

载载

此案例主要实现了一个功能是，在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

<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px"

class="demo-ruleForm login-container">

<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-form-item>

</el-form>

</template>

import NProgress from 'nprogress'

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

评论收藏

内容反馈

版权申诉

weixin_38506835

粉丝: 5
资源: 958

vue-router+vuex addRoutes实现路由动态加载及菜单动态加载

最新资源

vue-router+vuex addRoutes实现路由动态加载及菜单动态加载

vue addRoutes实现动态权限路由菜单的示例

vue3+webpack+vue-router路由封装+axios封装+vuex封装

vue后台管理之动态加载路由的方法

Vue 动态添加路由及生成菜单的方法示例

vue+element使用动态加载路由方式实现三级菜单页面显示的操作

详解vue-router2.0动态路由获取参数

vue-router之解决addRoutes使用遇到的坑

解决vue addRoutes不生效问题

vue addRoutes路由动态加载操作

vue用addRoutes实现动态路由的示例

前端VUE权限管理（包含菜单权限和按钮权限），router.addRoutes根据后台接口传递数据生成动态路由

Vue结合路由配置递归实现菜单栏功能

dynamicRouter:vue的动态路由实现方式(从后台接口获取动态路由，并生成左侧菜单)

vue动态添加路由addRoutes之不能将动态路由存入缓存的解决

vue+seajs实现按路由来异步按需加载模板和组件架构

vue 解决addRoutes多次添加路由重复的操作

vuevueroutervuexaxioselement后台管理框架

vue2笔记 — vue-router路由懒加载的实现

vue实现权限控制路由(vue-router 动态添加路由)

vue-router路由懒加载的实现（解决vue项目首次加载慢）

vue基础+vue-router+vuex记.zip

基于Vue+Vue-Router+Vuex+Element-ui+axios，参考小米商城，实现的电商项目。.zip

vue+vuex+vue-router+axios+elementui

最新资源