動態添加路由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)