Vue 동적 라우팅 구현(백그라운드에서 라우팅을 전달하고 프런트 엔드에서 가져와 사이드바 생성)-JS 튜토리얼-php.cn

이 글에서는 주로 Vue 동적 라우팅(라우팅이 백그라운드에서 전달되고 프런트 엔드가 사이드바를 가져오고 생성함)에 대해 소개합니다. 이제 이를 친구들과 공유합니다. 참고하시면 됩니다# 🎜🎜#

지옥은 비어 있고, 형님이 땅에 창조하고 계십니다. 비록 흙이지만 상처를 치료할 수 있습니다.

서문

vue 프로젝트 구현

dynamic Routing은 크게 두 가지로 나눌 수 있습니다:
1. end 여기에 경로를 작성합니다. 로그인 시 사용자의 역할 권한에 따라 경로가 동적으로 표시됩니다. (프런트 엔드 제어 라우팅) 자세한 내용은 #🎜🎜 프로젝트를 참조하세요. #꽃衩大哥
차근차근... 이 프로젝트를 한참동안 지켜보다가 어느 정도 논리를 이해하게 되었습니다. 마스터의 동적 라우팅에는 여러 겹의 판단이 산재해 있기 때문입니다. 다양한 vuex로 인해 초보자인 나를 혼란스럽게 만들었고 많은 영감을 주었으며 많은 논리를 제공한 것이 바로 이 기사였습니다
2. 현재 사용자는 백그라운드에서 전송되고, 프론트 엔드는 디버깅 인터페이스를 통해 이를 얻어서 처리합니다(백엔드 처리 라우팅)
두 가지 방법 모두 장점이 있으며 효과를 얻을 수 있습니다. 회사에서는 두 번째 방법을 통해 구현하는데, 그 이유는 회사 프로젝트에 전용 사용자 센터가 있기 때문입니다. 내부 로직이 매우 복잡하고, 프런트 엔드 사용자에게 권한을 반환하기가 어렵기 때문입니다. 라우팅을 프론트엔드에 두는 것은 안전하지 않습니다 (위의 말은 회사의 백엔드 학생들이 말한 것입니다) 그렇다면 시도해 보고 능력을 발휘하십시오.
우리는. 두 번째 방법을 채택했습니다.

오늘은 백그라운드 전송 라우팅 테이블을 사용하여 동적 라우팅을 구현하는 아이디어에 대해 이야기하겠습니다. 회사의 일부 프로젝트에서는 vuex를 사용하기 때문에 vuex 없이 라우팅 부분을 정리했습니다. , 모든 사람이 영감을 얻도록 하세요. 이는 절대적인 솔루션이 아니라 단지 아이디어일 뿐입니다

github:
https://github.com/Mrblackant...#🎜🎜 # 온라인 보기: http://an888.net/antRouter/#/...

아이디어 배열 Vue 동적 라우팅 구현(백그라운드에서 라우팅을 전달하고 프런트 엔드에서 가져와 사이드바 생성) # 🎜 🎜#다음 네 단계에 해당하는 코드는 모두 아래에 언급되어 있으며

1에 해당합니다. 배경 학생들은 json 형식의 라우팅 테이블을 반환하여 동적 섹션을 만들었습니다. 라우팅 테이블은

2를 참조하면 됩니다. 왜냐하면 백엔드 학생들이 반환하는 것은

문자열 형식이지만, 여기서 프론트엔드에 필요한 것은 컴포넌트 객체이기 때문입니다. 문자열을 구성요소 객체로 변환합니다.

3. vue-router의 beforeEach, addRoutes 및 localStorage를 사용하여 효과를 달성합니다.

4. bar는 변환된 경로 목록에 따라 진행됩니다. 표시;
일반 단계: 경로 가로채기->백그라운드에서 경로 가져오기->localStorage에 경로 저장(사용자는 한 번만 가져옵니다) 로그인할 때 백그라운드에서 한 번만 가져오고 나머지는 로컬에서 가져오므로 사용자는 로그아웃한 후에만 경로가 업데이트됩니다.) 각 경로는 Layout
구성 요소를 사용합니다. 전체 페이지 레이아웃은 왼쪽 메뉴 열, 오른쪽 페이지이므로 어린이 아래의 첫 번째 수준 경로는 자체 개발한 페이지이며, 경로 이름과 해당 경로에 해당하는 아이콘이 포함되어 있습니다.
왜냐하면; 다단계 메뉴인 경우
경로는 배열 형식입니다#🎜 🎜#

"data": {
    "router": [
      {
        "path": "",
        "component": "Layout",
        "redirect": "dashboard",
        "children": [
          {
            "path": "dashboard",
            "component": "dashboard/index",
            "meta": {
              "title": "首页",
              "icon": "dashboard"
            }
          }
        ]
      },
      {
        "path": "/example",
        "component": "Layout",
        "redirect": "/example/table",
        "name": "Example",
        "meta": {
          "title": "案例",
          "icon": "example"
        },
        "children": [
          {
            "path": "table",
            "name": "Table",
            "component": "table/index",
            "meta": {
              "title": "表格",
              "icon": "table"
            }
          },
          {
            "path": "tree",
            "name": "Tree",
            "component": "tree/index",
            "meta": {
              "title": "树形菜单",
              "icon": "tree"
            }
          }
        ]
      },
      {
        "path": "/form",
        "component": "Layout",
        "children": [
          {
            "path": "index",
            "name": "Form",
            "component": "form/index",
            "meta": {
              "title": "表单",
              "icon": "form"
            }
          }
        ]
      },
      {
        "path": "*",
        "redirect": "/404",
        "hidden": true
      }
    ]
  }

로그인 후 복사

2. 구성 요소": 백엔드에서 "구성 요소"로 반환한 "레이아웃": 레이아웃 구성 요소 개체

#🎜 🎜#다단계 라우팅의 출현으로 인해 순회 재귀 메서드를 작성해야 합니다. 배경이 문자열을 반환하기 때문에 구성 요소를 로드하는 프로세스는 메소드로 캡슐화되어야 합니다(여기서 꽃衩大神

솔루션 참조). ), 순회 시 이 방법을 사용하며, 자세한 내용은 프로젝트 내 라우터 폴더 아래의 _import_development.js 및 _import_production.js 파일을 확인하세요#🎜 🎜#Layout 제가 넣은 디렉토리가 다른 파일의 디렉토리와 다르기 때문에 제가 처리합니다. 순회에서 별도로 조정할 수 있습니다

const _import = require('./router/_import_' + process.env.NODE_ENV)//获取组件的方法
import Layout from '@/views/layout' //Layout 是架构组件，不在后台返回，在文件里单独引入

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
}
로그인 후 복사
3. beforeEach, addRoutes를 사용하여 구현에 협력합니다.

각 경로를 가로채기 전에 로컬에서 라우팅 데이터가 없는 것으로 확인되면 axios background를 사용하여 한 번 가져옵니다. 가져온 후 localStorage를 사용하여 저장하고 addRoutes를 사용하여 동적으로 라우팅을 추가합니다. #🎜 🎜#ps: beforeEach가 좋은지 나쁜지 한 단계만 거치면 브라우저가 충돌하게 됩니다. 경로를 얻으면 바로 next()를 추가해야 합니다. ,

global.antRouter는 렌더링을 위해 왼쪽 메뉴 구성 요소에 데이터를 전달하는 것입니다

import axios from 'axios'

var getRouter //用来获取后台拿到的路由

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.data.router//后台拿到路由
        saveObjArr('router', getRouter) //存储路由到localStorage

        routerGo(to, next)//执行路由跳转方法
      })
    } else {//从localStorage拿到了路由
      getRouter = getObjArr('router')//拿到路由
      routerGo(to, next)
    }
  } 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));

}

로그인 후 복사

4 통과된 경로를 가져오고 왼쪽 메뉴를 렌더링합니다 #🎜🎜. #

위의 세 번째 부분에서는 전역 변수(vuex로 대체 가능)인 global.antRouter에 값을 할당합니다. 여기서 다시 The Master의 레이아웃 부분을 참조합니다. of Flower Pants. 더 이상 코드를 게시하지 않겠습니다

저는 재능과 지식이 부족합니다. 특히 라우팅 차단 부분에 대한 수정은 환영합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 관련 내용은 PHP 중국어 홈페이지를 주목해 주세요!

관련 권장사항:

Vue 속성 $route

vue-router+nginx 비루트 경로 구성 방법

vue가 addRoutes 이후 새로 고침 실패 문제를 해결하는 방법 동적으로 경로를 추가합니다

위 내용은 Vue 동적 라우팅 구현(백그라운드에서 라우팅을 전달하고 프런트 엔드에서 가져와 사이드바 생성)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!