vue 배경 관리의 동적 로드 루트 방법

여기 서 저 희 는 vue 동적 경로 의 안건 열 을 실현 할 것 입 니 다.사용자 가 로그 인 에 성공 한 후에 사용자 의 역할 에 따라 해당 하 는 메뉴 정 보 를 얻 고 이 를 저희 경로 에 동적 으로 불 러 올 것 입 니 다.
우리 의 유 니 버 설 백 스테이지 관리 시스템 에서 우 리 는 권한 의 굵기 에 따라 모든 역할 의 모든 권한 과 자원 을 제어 할 것 입 니 다.마찬가지 로 우리 도 이런 기능 을 실현 해 야 한다.이 글 은 주로 vue 단의 실현 을 이야기 할 것 입 니 다.배경 인터페이스 에 대해 저 는 언급 하지 않 을 것 입 니 다.제 가 접촉 할 때 우리 의 배경 인 터 페 이 스 는 springcloud 실현 입 니 다.
생각
vue-router 대상 에서 먼저 공공 경 로 를 초기 화 합 니 다.예 를 들 어(404,login)등 이 있 습 니 다.그리고 사용자 로그 인 에 성공 한 다음 에 사용자 의 역할 정보 에 따라 권한 메뉴 정보 menuList 를 얻 고 배경 에서 돌아 오 는 menuList 를 우리 가 필요 로 하 는 router 데이터 구조 로 변환 한 다음 에 vue-router 2.2 에 추 가 된 router.addRouter(routes)방법 을 통 해또한 저 희 는 전 환 된 경로 정 보 를 vuex 에 저장 할 수 있 습 니 다.그러면 저 희 는 SideBar 구성 요소 에서 저희 의 모든 경로 정 보 를 얻 을 수 있 고 왼쪽 메뉴 표시 줄 을 렌 더 링 하여 동적 경로 가 실 현 될 수 있 습 니 다.
실현
1.공공 경로 정의

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
/* Layout */
import Layout from '../views/layout/Layout'

export const constantRouterMap = [
 { path: '/login', component: () => import('@/views/login/index'), hidden: true },
 { path: '/404', component: () => import('@/views/404'), hidden: true },

 {
  path: '/',
  component: Layout,
  redirect: '/dashboard',
  name: 'Dashboard',
  hidden: true,
  children: [{
   path: 'dashboard',
   component: () => import('@/views/dashboard/index')
  }]
 },
]
export default new Router({
 scrollBehavior: () => ({ y: 0 }),
 routes: constantRouterMap
})

2.메뉴 정보 가 져 오기

router.beforeEach((to, from, next) => {
 NProgress.start() // start progress bar
 if (getToken()) { // determine if there has token
  /* has token*/
  if (to.path === '/login') {
   next({ path: '/' })
   NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it
  } else {
   if (store.getters.roles.length === 0) { //             user_info  
    store.dispatch('GetInfo').then(res => { //   user_info
     const roles = res.roles
     store.dispatch("GetMenu").then(data => {
      initMenu(router, data);
     });
     next()
    }).catch((err) => {
     store.dispatch('FedLogOut').then(() => {
      Message.error(err || 'Verification failed, please login again')
      next({ path: '/' })
     })
    })
   } else {
    next()
   }
  }
 } else {
  /* has no token*/
  if (whiteList.indexOf(to.path) !== -1) { //        ，    
   next()
  } else {
   next('/login') //            
   NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
  }
 }
})

router.afterEach(() => {
 NProgress.done() // finish progress bar
})

여기 서 저 희 는 router 의 beforeech 갈고리 함 수 를 통 해 사용자 가 캐릭터 정 보 를 얻 었 는 지 여 부 를 판단 합 니 다.없 으 면 배경 에 해당 하 는 캐릭터 정 보 를 요청 한 다음 에 캐릭터 정 보 를 통 해 해당 하 는 메뉴 목록 을 다시 요청 하고 메뉴 목록 을 얻 은 다음 에 메뉴 목록 을 포맷 하여 router 배열 의 구조 로 전환 합 니 다.
3.동적 로드 루트

import store from '../store'

export const initMenu = (router, menu) => {
 if (menu.length === 0) {
  return
 }
 let menus = formatRoutes(menu);
 //     
 let unfound = { path: '*', redirect: '/404', hidden: true }
 menus.push(unfound)
 router.addRoutes(menus)
 store.commit('ADD_ROUTERS',menus)
}

export const formatRoutes = (aMenu) => {
 const aRouter = []
 aMenu.forEach(oMenu => {
  const {
   path,
   component,
   name,
   icon,
   childrens
  } = oMenu
  if (!validatenull(component)) {
   let filePath;
   const oRouter = {
    path: path,
    component(resolve) {
     let componentPath = ''
     if (component === 'Layout') {
      require(['../views/layout/Layout'], resolve)
      return
     } else {
      componentPath = component
     }
     require([`../${componentPath}.vue`], resolve)
    },
    name: name,
    icon: icon,
    children: validatenull(childrens) ? [] : formatRoutes(childrens)
   }
   aRouter.push(oRouter)
  }

 })
 return aRouter
}

여기에서 우 리 는 menList 를 router List 로 변환 합 니 다.배경 에서 돌아 오 는 데 이 터 는 규범 화 된 router 구조 가 아니 기 때문에 여기 서 우리 가 처리 해 야 합 니 다.만약 에 배경 에서 규범 화 된 것 으로 돌아 오 면 처리 할 필요 가 없습니다.그리고 router.addRoutes 를 통 해 배경 에서 돌아 오 는 것 을 우리 의 경로 에 추가 하고 이 를 우리 의 vuex 에 저장 해 야 합 니 다.404 구성 요 소 를 동적 경로 에 두 고 불 러 와 야 합 니 다.
4.렌 더 링 메뉴
사실 여 기 는 우리 가 말 한 중점 에 속 하지 않 습 니 다.여 기 는 vuex 에 존재 하 는 경로 정 보 를 꺼 내 고 왼쪽 메뉴 표시 줄 로 렌 더 링 하면 됩 니 다.여기 서 우 리 는 element-ui 를 사용 했다.

<template>
 <el-scrollbar wrapClass="scrollbar-wrapper">
  <el-menu
   mode="vertical"
   :show-timeout="200"
   :default-active="$route.path"
   :collapse="isCollapse"
   background-color="#304156"
   text-color="#bfcbd9"
   active-text-color="#409EFF"
  >
   <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
  </el-menu>
 </el-scrollbar>
</template>

<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'
import { validatenull } from "@/utils/validate";
import { initMenu } from "@/utils/util";

export default {
 components: { SidebarItem },
 created() {
 },
 computed: {
  ...mapGetters([
   'permission_routers',
   'sidebar',
   'addRouters'
  ]),
  isCollapse() {
   return !this.sidebar.opened
  }
 }
}
</script>

이렇게 해서 우리 의 동적 로드 루트 는 실 현 된 것 입 니 다.간단 하지 않 습 니까?관건 은 router.addRoute 방법 입 니 다.다음은 밟 지 말 라 고.
구덩이
1.메뉴 정 보 를 불 러 올 시기
그 전에 저 는 두 번 째 메뉴 정 보 를 사 이 드 바 구성 요소 의 create 함수 에 두 었 습 니 다.그 때 는 문제 가 없다 는 것 을 알 게 되 었 습 니 다.로그 인 을 홈 인터페이스 왼쪽 메뉴 로 옮 겨 도 렌 더 링 에 성 공 했 습 니 다.메뉴 를 클릭 하여 우리 가 동적 으로 불 러 오 는 경로 인터페이스 에 들 어가 도 괜 찮 습 니 다.하지만 내 가 리 셋 을 눌 렀 을 때 문제 가 생 겼 다.페이지 공백 콘 솔 도 잘못 보고 하지 않 았 다.당시 에 나 는 속 였 는데,무슨 상황 이 냐,멀쩡 하지 않 느 냐?여러분 도 이 럴 때 조급해 하지 말고 전체 절 차 를 냉정 하 게 분석 하면 문제 의 소 재 를 발견 할 수 있 습 니 다.
1.로그 인 에 성공 하여 home 인터페이스 로 전환 합 니 다.home 구성 요 소 는 공공 경로 이 고 존재 하 는 문제 가 없습니다.
2.이때 sidebar 구성 요소 create 갈고리 가 실 행 됩 니 다.메뉴 목록 가 져 오기
3.메뉴 목록 을 배열 로 바 꾸 고 router 인 스 턴 스 와 vuex 에 불 러 옵 니 다.
4.sidebar 는 vuex 에서 배열 렌 더 링 메뉴 를 가 져 와 우리 동적 로 딩 페이지 에 들 어가 정상 적 인 것 을 보 여 줍 니 다.이 모든 것 은 문제 가 없어 보 입 니 다.
5.브 라 우 저의 새로 고침 버튼 이나 F5 를 누 르 면 페이지 가 비어 있 습 니 다.
원인:다섯 번 째 단계 에서 우리 의 브 라 우 저 는 새로 고침 되 었 습 니 다.spa 에서 전체 vue 인 스 턴 스 를 다시 불 러 옵 니 다.또한 나의 vue-router 가 다시 초기 화 될 것 입 니 다.그러면 우리 의 이전 동적 addRoute 는 존재 하지 않 았 습 니 다.그러나 우 리 는 존재 하지 않 는 페이지 를 방문 하기 때문에 우리 의 sidebar 구성 요소 도 접근 하지 않 을 것 입 니 다.그러면 메뉴 정 보 를 얻 을 수 없습니다.페이지 공백 을 초래 합 니 다.그래서 메뉴 정 보 를 불 러 오 는 단 계 를 router 의 전역 수비 beforeach 에 두 면 됩 니 다.
2.404 구성 요소 의 위치
보 실 수 있 습 니 다.

export const initMenu = (router, menu) => {
 if (menu.length === 0) {
  return
 }
 let menus = formatRoutes(menu);
 //     
 let unfound = { path: '*', redirect: '/404', hidden: true }
 menus.push(unfound)
 router.addRoutes(menus)
 store.commit('ADD_ROUTERS',menus)
}

404 구성 요 소 는 동적 경로 구성 요소 의 마지막 에 두 어야 한다 고 강 조 했 습 니 다.그렇지 않 으 면 동적 으로 불 러 온 페이지 를 새로 고치 고 404 페이지 로 이동 할 것 입 니 다.
효과 도

동적 경로
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.