vue 백 엔 드 는 루트 테이블 로 돌아 가 권한 관 리 를 하고 지정 한 루트 구 조 를 불 러 옵 니 다. 포함 하지 않 으 면 불 러 오지 않 습 니 다.

vue 프로젝트 를 만 들 고 환경 변 수 를 설정 합 니 다. 나중에 사용 해 야 합 니 다.이곳 은 생산 환경 과 개발 환경 만 배치한다.
프로젝트 루트 디 렉 터 리 생 성. env. production 파일

NODE_ENV=production
VUE_APP_URL=http://456.com

프로젝트 루트 디 렉 터 리 생 성. env. development 파일

NODE_ENV=development
VUE_APP_URL=http://123.com

src 디 렉 터 리 에 router 폴 더 를 만 듭 니 다. index 파일 의 내용 은?

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
var constantRouterMap=[]



export default new Router({
  routes: constantRouterMap,
  mode:'history'
})

main. js 에 도입
router 폴 더 아래 에 만 들 기import_development.js

module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+

router 폴 더 아래 에 만 들 기import_production.js

module.exports = file => () => import('@/views/' + file + '.vue')

이것 은 서로 다른 환경 에서 대응 하 는 파일 을 불 러 오 는 방법 입 니 다.
src 폴 더 에 perssion. js 를 만 들 고 데 이 터 를 요청 하 며 필요 에 따라 구성 요 소 를 불 러 옵 니 다.
　　

import router from './router'
import {
  Message
} from 'element-ui'
import axios from 'axios'
const _import = require('./router/_import_' + process.env.NODE_ENV) //       
import Layout from '@/views/layout' //Layout      ，      ，        


var getRouter //           




let IsFirst = true;//        ，               

router.beforeEach((to, from, next) => {
  if (!getRouter) { //      ，        
    if (!getObjArr('router')) {
      axios.get('https://www.easy-mock.com/mock/5a5da330d9b48c260cb42ca8/example/antrouter').then(res => {
        getRouter = res.data; //      
        saveObjArr('router', getRouter) //     localStorage
        router.push(getRouter[0].path);
        routerGo(to, next) //        
      })
    } else { // localStorage     
      getRouter = getObjArr('router') //    
      routerGo(to, next)

    }
  } else {
    if (to.path == '/404') {//           404  
      if (IsFirst) {
        IsFirst = false;
        return;
      }
      Message.error('           ，          !');
      return;
    } else {
      next()
    }
  }

})


function routerGo(to, next) {
  getRouter = filterAsyncRouter(getRouter) //    
  router.addRoutes(getRouter) //      
  global.antRouter = getRouter //            ，          
  next({
    ...to,
    replace: true
  })
}

function saveObjArr(name, data) { //localStorage          
  localStorage.setItem(name, JSON.stringify(data))
}

function getObjArr(name) { //localStorage          
  return JSON.parse(window.localStorage.getItem(name));

}

function filterAsyncRouter(asyncRouterMap) { //            ，       
  const accessedRouters = asyncRouterMap.filter(route => {
    if (route.component) {
      if (route.component === 'Layout') {//Layout      
        route.component = Layout
      } else {
      route.component = _import(route.component)
      }
    }
    if (route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children)
    }
    return true
  })

  return accessedRouters
}

main. js 에 permission. js 파일 도입

루트 테이블 구조

[{
    path: '/hdedit',
    name: 'hdEdit',
    component: 'znfsgl/hdEdit/index',
  },
  {
    path: '/wxtsjl',
    name: 'wxtsjl',
    component: 'znfsgl/wxtsjl/index',
  },
  {
    path: '/wxsc',
    name: 'wxsc',
    component: 'znfsgl/wxsc/index',
  }]

　　
디 렉 터 리 되 돌리 기
 
다음으로 전송:https://www.cnblogs.com/gitByLegend/p/11181353.html