var vm = new Vue({ el: '#example', data: { currentView: 'home' }, components: { home: { /* ... */ }, posts: { /* ... */ }, archive: { /* ... */ } } }) <component v-bind:is="currentView"> <!-- 组件在 vm.currentview 变化时改变！ --> </component>
动态菜单权限
由于菜单是根据权限动态生成的，所以默认的路由只需要几个不需要权限判断的页面，其他的页面的路由放在一个map对象 asyncRouterMap 中，
设置 role 为权限对应的编码
export const asyncRouterMap = [ { path: '/project', component: Layout, redirect: 'noredirect', name: 'Project', meta: { title: '项目管理', icon: 'project' }, children: [ { path: 'index', name: 'Index', component: () => import('@/views/project/index'), meta: { title: '项目管理', role: 'PRO-01' } },
导航守卫的判断，如果有 token 以及 store.getters.allowGetRole 说明用户已经登录， routers 为用户根据权限生成的路由树，如果不存在，则调用 store.dispatch('GetMenu') 请求用户菜单权限，再调用 store.dispatch('GenerateRoutes') 将获取的菜单权限解析成路由的结构。
router.beforeEach((to, from, next) => { if (whiteList.indexOf(to.path) !== -1) { next() } else { NProgress.start() // 判断是否有token 和 是否允许用户进入菜单列表 if (getToken() && store.getters.allowGetRole) { if (to.path === '/login') { next({ path: 'https://www.jb51.net/' }) NProgress.done() } else { if (!store.getters.routers.length) { // 拉取用户菜单权限 store.dispatch('GetMenu').then(() => { // 生成可访问的路由表 store.dispatch('GenerateRoutes').then(() => { router.addRoutes(store.getters.addRouters) next({ ...to, replace: true }) }) }) } else { next() } } } else { next('/login') NProgress.done() } } })
store中的actions
// 获取动态菜单菜单权限 GetMenu({ commit, state }) { return new Promise((resolve, reject) => { getMenu().then(res => { commit('SET_MENU', res.data) resolve(res) }).catch(error => { reject(error) }) }) }, // 根据权限生成对应的菜单 GenerateRoutes({ commit, state }) { return new Promise(resolve => { // 循环异步挂载的路由 var accessedRouters = [] asyncRouterMap.forEach((item, index) => { if (item.children && item.children.length) { item.children = item.children.filter(child => { if (child.hidden) { return true } else if (hasPermission(state.role.menu, child)) { return true } else { return false } }) } accessedRouters[index] = item }) // 将处理后的路由保存到vuex中 commit('SET_ROUTERS', accessedRouters) resolve() }) },
项目的部署和版本切换
目前项目有两个环境，分别为测试环境和生产环境，请求的接口地址配在 \src\utils\global.js 中，当部署生产环境时只需要将develop分支的代码合并到master分支，global.js不需要再额外更改地址
总结
以上所述是小编给大家介绍的vue项目前端知识点整理，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章: