<!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>
后台权限的管理需要用到动态添加路由, 管理员的权限不一样,展示的界面不一样,登录时判断身份,获取权限, 例如:超级管理员与用户管理人员
--------------------------------------------------------------------------------------------------------------------------------
海量IT资源,JavaScript,Java,Python等各类实战课,体系课程资源,需要的可以加V: 2919293547