动态添加路由addRoutes

本文转载自查看原文 2019-01-11 15:13 2122 vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
　　 <div id="app">
        <ul>
            <li v-if="!item.hidden" v-for="item in user" :key="item.path">
                {{item.title}}
            </li>
        </ul>
    </div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script src="../js/vuex.js"></script>
<script>
    const routes = [
        {
            path: '/',     //path就是对应导航的路径
            title: '首页'　　//title就是对应的导航的名字
        },
        {
            path: '/page1',
            title: '分页1'
        },
        {
            path: '/page2',
            title: '分页2'
        },
        {
            path: '/page3',
            title: '分页3'
        },
        {
            path: '/page4',
            title: '分页4'
        },
        {
            path: '/login',
            title: '登录',
            hidden: true
        },
        {
            path: '/404',
            title: '404',
            hidden: true    //隐藏不需要渲染到页面上的路由
        }
    ]
    const asyncUser = [
        {
            path: '/page5',
            title: '分页5',
            meta: {
                roles: ['admin']
            }
        },
        {
            path: '/page6',
            title: '分页6',
            meta: {
                roles: ['admin','guest']
            }
        }
    ]
　　//模拟一个登录用户
    const user = {
        role: 'guest'
    }
    const store = new Vuex.Store({
        state: {
            user: null,
            routes
        },
        mutations: {
            setRoutes (state, router) {
                state.routes = [...state.routes, ...router]
            },
            setUser (state, user) {
                state.user = user
            }
        }
    })
    const router = new VueRouter({
        routes
    })
    router.beforeEach((to, from, next) => {
　　　　//判断user信息是否已经获取
        if (!store.state.user) {
　　　　　　　　//根据用户的类型来生成对应的新路由
            const newRouter = asyncUser.filter(route => route.meta.roles.includes(user.role))
            //将新路由添加到路由中
　　　　　　　router.addRoutes(newRouter)
　　　　　　　　//为了正确渲染导航,将对应的新的路由添加到vuex中
            store.commit('setRoutes', newRouter)
　　　　　　　　//将登录得到的use而添加到user中
            store.commit('setUser', user)
        }
    })
    const app = new Vue({
        el: "#app",
        router,
        store,
        computed: {
            user () {
　　　　　　　　　　//获取到vuex中的routes用来渲染导航
                return this.$store.state.routes
            }
        }
    })
</script>
</html>

后台权限的管理需要用到动态添加路由, 管理员的权限不一样,展示的界面不一样,登录时判断身份,获取权限, 例如:超级管理员与用户管理人员

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 addRoutes动态添加路由 vue动态添加路由addRoutes之不能将动态路由存入缓存 vue 解决addRoutes动态添加路由后刷新失效问题 vue addRoutes路由动态加载 Vue addRoutes 动态路由打包问题 vue 重置router.addRoutes添加的路由解决vue addRoutes多次添加路由重复问题。 vue中使用动态添加路由(router.addRoutes)加载权限侧边栏的两种方式 vue中做权限管理使用router.addRoutes()动态添加路由以及解决刷新失效，跳转后刷新失效问题 Vue动态菜单(路由)的实现方案(beforeEach+addRoutes+elementUI)