vue iview는 동적 라우팅을 만듭니다.-JS 튜토리얼-php.cn

이번에는 vue iview로 동적 라우팅을 만드는 방법을 알려드리겠습니다. vue iview로 동적 라우팅을 만들 때 주의사항은 무엇인가요?

목표 달성

클라이언트는 서버로부터 라우팅 및 권한 데이터를 받은 후 프로젝트의 라우팅 및 메뉴 목록을 새로 고치고 권한을 제어합니다.

프로젝트 기반

기본 프레임워크: iview 컴포넌트 라이브러리 공식 템플릿 프로젝트 iview-admin의 템플릿 브랜치 프로젝트, 이 프로젝트는 iview-admin의 기본 프레임워크 코드입니다. 프로젝트 주소: iview-admin

구현 로직

동적 라우팅 제어 로딩

일반적으로 동적 라우팅 제어는 두 가지 유형으로 나누어집니다. 하나는 모든 라우팅 데이터를 로컬 파일에 저장하고, 그 다음 획득하는 것입니다. 서버에서 사용자의 권한 정보를 가져오고, 경로 점프 시 권한 판단 후크를 추가합니다. 사용자가 이동하는 페이지가 권한 목록에 없으면 점프가 금지됩니다. 다른 하나는 오류 처리 페이지, 권한 없음 제어 페이지 등과 같은 기본 경로만 로컬에 저장하는 반면 서버는 사용자의 권한에 따라 해당 라우팅 데이터를 발급하고 클라이언트는 이를 사용하는 것입니다. 라우팅을 위한 데이터를 동적으로 생성하고 추가하기 위해 이 문서에서는 두 번째 방법을 사용합니다.

iview-admin 프로젝트는 경로를 세 가지 유형으로 나눕니다.

로그인, 404, 403 및 기타 오류 페이지 경로와 같은 기본 구성 요소의 하위 페이지로 표시되지 않는 페이지 경로
하위로; - 홈 페이지 라우팅
과 같이 표시되지만 왼쪽 메뉴에 표시되지 않는 기본 구성 요소 Router otherRouter의 페이지는 기본 구성 요소의 하위 페이지로 표시되며 왼쪽 메뉴 appRouter에 표시됩니다.

라우팅 데이터를 얻은 후 우리는 주로 두 가지 작업을 수행합니다. 작업의 일부인 첫 번째 부분은 데이터를 탐색하고 구성 요소 비동기 로딩 방법을 사용하여 각 라우팅 노드에 해당하는 구성 요소를 로드한 다음 페이지 태그를 사용하는 것입니다. 라우팅 정보를 얻기 위해 appRouter를 순회하는

프레임워크의 탐색경로 탐색이 필요합니다. 따라서 글로벌 액세스를 위해 라우팅 데이터도 vuex에 저장되어야 합니다. router.addRoutes(routes) 完成路由列表的动态添加；第二部分是因为 iview-admin

404 페이지가 정적 경로인 경우 처음 페이지에 들어갈 때 동적 경로가 아직 로드되지 않은 경우 라우팅 주소를 찾을 수 없으면 다음 페이지로 이동한다는 점에 유의하세요. 기본적으로 404 오류 페이지가 매우 열악하므로 404 경로가 라우팅 규칙에 먼저 기록되지 않고 동적 라우팅과 함께 로드됩니다.

메인 코드는 다음과 같이 구현됩니다.

데이터 요청 및 라우팅 노드 생성

//util.js
//生成路由
util.initRouter = function (vm) {
 const constRoutes = [];
 const otherRoutes = [];
 // 404路由需要和动态路由一起注入
 const otherRouter = [{
  path: '/*',
  name: 'error-404',
  meta: {
   title: '404-页面不存在'
  },
  component: 'error-page/404'
 }];
 // 模拟异步请求
 util.ajax('menu.json').then(res => {
  var menuData = res.data;
  util.initRouterNode(constRoutes, menuData);
  util.initRouterNode(otherRoutes, otherRouter);
  // 添加主界面路由
  vm.$store.commit('updateAppRouter', constRoutes.filter(item => item.children.length > 0));
  // 添加全局路由
  vm.$store.commit('updateDefaultRouter', otherRoutes);
  // 刷新界面菜单
  vm.$store.commit('updateMenulist', constRoutes.filter(item => item.children.length > 0));
 });
};
//生成路由节点
util.initRouterNode = function (routers, data) {
 for (var item of data) {
  let menu = Object.assign({}, item);
  menu.component = lazyLoading(menu.component);
  if (item.children && item.children.length > 0) {
   menu.children = [];
   util.initRouterNode(menu.children, item.children);
  }
  //添加权限判断
  meta.permission = menu.permission ? menu.permission : null;
  //添加标题
  meta.title = menu.title ? menu.title : null;
  menu.meta = meta;
 }
};

로그인 후 복사

동적 로딩 구성 요소

//lazyLoading.js
export default (url) =>()=>import(`@/views/${url}.vue`)
Store缓存实现
//app.js
 // 动态添加主界面路由，需要缓存
updateAppRouter (state, routes) {
 state.routers.push(...routes);
 router.addRoutes(routes);
},
// 动态添加全局路由，不需要缓存
updateDefaultRouter (state, routes) {
 router.addRoutes(routes);
},
// 接受前台数组，刷新菜单
updateMenulist (state, routes) {
 state.menuList = routes;
}

로그인 후 복사

최종적으로 main.js에서 호출

//main.js
 mounted () {
 // 调用方法，动态生成路由
 util.initRouter(this);
 }

로그인 후 복사

권한 제어

동적 라우팅 구현과 유사 조작 권한 제어는 일반적으로 두 가지 유형으로 나누어집니다. 첫 번째는 페이지가 표시될 때 권한이 제어되지 않는 것입니다. 그런 다음 조작이 시작되면 권한 판단이 수행됩니다. 사용자에게 작업에 대한 권한이 있으면 통과합니다. 그렇지 않으면 사용자에게 권한이 없다는 알림이 표시됩니다. 두 번째 방법은 페이지가 로드될 때 권한을 판단하는 것이며, 권한 없는 작업은 표시되지 않습니다. 나는 개인적으로 사용자가 보는 것이 작동 가능해야 한다고 생각하는 두 번째 방법을 선호합니다. 그렇지 않으면 버튼을 클릭한 다음 권한이 없다는 메시지가 표시되는 것이 매우 불편할 것입니다.

이 프로젝트의 아이디어의 출처는 참조 블로그 게시물에서 찾을 수 있습니다. 원래 블로거의 구체적인 아이디어는 라우팅 구조의 메타 필드에 사용자 작업 권한 목록을 추가한 다음 전역 명령을 등록하는 것입니다. 노드가 처음으로 렌더링되면 페이지에 권한이 있는지 확인하고, 권한이 있고 전달된 매개변수가 권한 목록에 없으면 노드를 직접 삭제하세요.

주요 코드는 다음과 같이 구현됩니다.

라우팅 데이터에 권한 필드를 추가하여 권한 목록을 저장합니다

//menu.json，模拟异步请求数据
[
 {
 "path": "/groupOne",
 "icon": "ios-folder",
 "name": "system_index",
 "title": "groupOne",
 "component": "Main",
 "children": [
  {
  "path": "pageOne",
  "icon": "ios-paper-outline",
  "name": "pageOne",
  "title": "pageOne",
  "component": "group/page1/page1",
  "permission":["del"]
  },
  ...
 ]
 }
]

로그인 후 복사

라우팅 노드를 생성하기 위해 순회할 때 라우팅 노드의 메타 속성에 권한 필드 데이터를 저장합니다

//util.js
//生成路由节点
util.initRouterNode = function (routers, data) {
 for (var item of data) {
  ....
  //添加权限判断
  meta.permission = menu.permission ? menu.permission : null;
  ...
 }
};

로그인 후 복사

전역 명령 구성 요소를 정의하고 경로 권한 속성 값 가져오기를 읽어 권한 목록을 가져오세요. 권한이 권한 목록에 없으면 노드를 삭제하세요.

//hasPermission.js 
const hasPermission = {
 install (Vue, options) {
  Vue.directive('hasPermission', {
   bind (el, binding, vnode) {
    let permissionList = vnode.context.$route.meta.permission;
    if (permissionList && permissionList.length && !permissionList.includes(binding.value)) {
     el.parentNode.removeChild(el);
    }
   }
  });
 }
};
export default hasPermission;

로그인 후 복사

권한 구성 요소 사용 예:

<template>
 <p>
  <h1>page1</h1>
  <Button v-hasPermission="&#39;add&#39;">添加</Button>
  <Button v-hasPermission="&#39;edit&#39;">修改</Button>
  <Button v-hasPermission="&#39;del&#39;">删除</Button>
 </p>
</template>

로그인 후 복사

글로벌 등록 구성 요소

// main.js
import hasPermission from '@/libs/hasPermission.js';
Vue.use(hasPermission);

로그인 후 복사

이 권한 제어 방법의 장점은 관리 구성과 페이지 처리 로직 모두 비교적 간단하다는 것입니다. 인터넷에서 여러 구현 방법을 참고하고 비교한 결과 반복되는 코드 판단과 노드 처리가 많지 않습니다. 개인적으로 이 방법을 추천합니다.

페이지 태그 및 탐색경로 탐색

제 생각에는 페이지 태그와 탐색경로가 시스템의 페이지 관련 컨트롤의 가장 중요한 역할을 하며 페이지 관리의 편의성을 향상시킵니다. 이 두 가지는 iview 공식에서 구현되었습니다. 관리 프로젝트 구성 요소. 따라서 이 프로젝트에서는 이를 이식하고 구성요소 기능만 구현했습니다. 관심 있는 분들은 자세히 살펴보시기 바랍니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!