nuxt 경로,과도 효과,미들웨어 의 실현 코드

9246 단어 nuxt경로이행 하 다중간 부품
pages 에 있 는 파일.vue 파일 은 자동 으로 경로 로 불 러 옵 니 다.
0.성명 식 내 비게 이 션
첫 페이지
용법 은 router-link 용법 과 일치 합 니 다.
1.1 급 경로 정의
pages 아래.vue 파일 을 만 들 고 접근 경 로 를 추가/파일 이름,접근
index.vue 에 대응 하 는 경 로 는'/'입 니 다.
2.다단 계 경로 만 들 기
pages 에서 폴 더 를 만 들 고 폴 더 에.vue 파일 을 만 듭 니 다.
접근 경로:/폴 더 이름/파일 이름
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
다음 으로 변 환 됩 니 다:

router: {
 routes: [
  {
  name: 'index',
  path: '/',
  component: 'pages/index.vue'
  },
  {
  name: 'user',
  path: '/user',
  component: 'pages/user/index.vue'
  },
  {
  name: 'user-one',
  path: '/user/one',
  component: 'pages/user/one.vue'
  }
 ]
 }
3.동적 경로 파라미터
하나 로접두사 로 밑줄 친 Vue 파일 이나 디 렉 터 리.
인자 this.$route.params.키 이름 가 져 오기이름

pages/
 --| _slug/
 -----| comments.vue
 -----| index.vue
 --| users/
 -----| _id.vue
 --| index.vue
 
 router: {
 routes: [
  {
  name: 'index',
  path: '/',
  component: 'pages/index.vue'
  },
  {
  name: 'users-id',
  path: '/users/:id?',
  component: 'pages/users/_id.vue'
  },
  {
  name: 'slug',
  path: '/:slug',
  component: 'pages/_slug/index.vue'
  },
  {
  name: 'slug-comments',
  path: '/:slug/comments',
  component: 'pages/_slug/comments.vue'
  }
 ]
 }
4.동적 경로 파라미터 검증
data 와 동급

 validate({params}) { 
 console.log(params.  ); 

//              true Promise  resolve    false    Error ， Nuxt.js         404       500     。

return true;
 }
5.내장 경로
x.vue 의 내장 경로,먼저 x 폴 더 를 전달 하고 내부 의.vue 파일 은 내장 경로 가 됩 니 다.
부모 구성 요소내장 하위 구성 요소 내용 표시

pages/
 --| users/
 -----| _id.vue
 -----| index.vue
 --| users.vue
 
 router: {
 routes: [
  {
  path: '/users',
  component: 'pages/users.vue',
  children: [
   {
   path: '',
   component: 'pages/users/index.vue',
   name: 'users'
   },
   {
   path: ':id',
   component: 'pages/users/_id.vue',
   name: 'users-id'
   }
  ]
  }
 ]
 }
6.이름 보기
또는
nuxt.config.js 에 루트 확장 설정 추가

 router: {
  extendRoutes(routes, resolve) {
  
  //            ,  index
  const index = routes.findIndex(route => route.name === '    ')
  
  routes[index] = {
  //            
   ...routes[index],
   
   //  components chunkNames             
   components: {
   default: routes[index].component,
   //     : resolve(__dirname, '       /.vue')
   },
   
   chunkNames: {
   //     : '       /.vue'
   }
  }
  }
 }
7.과도 효과
(1)전역 과도 효과
모든 페이지 전환 에 페이드아웃(fade)효과 가 있 습 니 다.
1.전역 스타일 파일 assets/x.css 에 스타일 추가:

 .page-enter-active,
 .page-leave-active {
  transition: opacity 0.5s;
 }
 .page-enter,
 .page-leave-active {
  opacity: 0;
 }
2.nuxt.config.js 파일 중
css: ['assets/x.css']
(2)특정한 페이지 에서 과도 효 과 를 사용자 정의 합 니 다.
1.전역 스타일 assets/x.css 에 내용 추가:

.test-enter-active,
.test-leave-active {
 transition: opacity 0.5s;
}
.test-enter,
.test-leave-active {
 opacity: 0;
}
2.nuxt.config.js 파일 중
css: ['assets/x.css']
3.구성 요소 에서 data 와 같은 등급
transition: 'test'
8.중간 부품
미들웨어 는 한 페이지 나 한 페이지 가 렌 더 링 되 기 전에 사용자 정의 함 수 를 정의 할 수 있 습 니 다.
(1)middleware 폴 더 에.js 파일 을 만 듭 니 다.파일 이름 은 미들웨어 이름 입 니 다.

export default function(context){

 //    context         
 ...
 //context.route       
 }
비동기 미들웨어:Promise 로 돌아 가면 됩 니 다.
(2)각 페이지 에서 중간 부품 실행
nuxt.config.js 에 추가

router: {
 middleware: '     '
 }
 }
(3)지정 한 레이아웃 이나 페이지
구성 요소 에서 data 와 같은 등급 입 니 다.추가:
middleware:'미들웨어 이름'
9.경로 재 설정
방식 1:
구성 요소 중

 asyncData(context, callback) {
 context.redirect('/');
 },
방식 2:
미들웨어 정의

 export default function(context)
 {
 if(context.isHMR)
 {
 return;       ,     
 }

  if(context.route.fullPath==='/xxx)
  {
  context.redirect('/x')
  }
 }
중간 부품 을 nuxt.config.js 에서 전역 또는 단독 구성 요소 로 설정 합 니 다.
10.하 이 라이트
방식 1:

 router: {
  linkActiveClass: 'active-link' 
  linkExactActiveClass: 'exact-active-link'
 }
방식 2:
클래스 이름 을 직접 추가 합 니 다.style 에는 scoped 속성 이 있 을 수 없습니다.
.nuxt-link-exact-active 부모 경로 가 밝 지 않 습 니 다.
nuxt-link-active 부모 경로 도 밝 아 집 니 다.
방식 3:
각각 nuxt-link 탭 에 activeClass='클래스'를 추가 하고 클래스 의 스타일 을 정의 합 니 다.
11.경로 설정 모드
nuxt.config.js 에서

 router:{
 mode:'hash'
 }
보충 지식:nuxt 설정 루트 의 메타 속성,nuxt 설정 루트 의 메타,nuxt 설정 루트 의 메타
nuxt 홈 페이지 에서 말 하 는 UI 의 렌 더 링 에 전념 합 니 다.저 자 는 배경 관 리 를 쓰 는 화면 이 어 떻 습 니까?spa 모드 를 켜 거나 바 꾸 지 않 아 도 다른 경험 을 할 수 있 습 니 다.
nuxt.js 의 관리 배경 프로젝트 를 바탕 으로 하나의 프로젝트 배 치 는 원 스 톱 관리 데이터 베이스 와 당신 의 업무 의 추가 삭제 와 검사 작업 을 할 수 있 습 니 다.프로젝트 가 아직 완선 되 지 않 았 습 니 다.완 선 된 후에 github 에서 시 작 됩 니 다.
한 문제 에 여러 가지 방법 을 생각 하여,마침내 어 리 석 은 방법 으로 이 문 제 를 해결 하 였 다.
다음 과 같다.
routes.js 는 다음 과 같 습 니 다.

/**
 * nuxt       
 * @description                 ,         
 */
const menus = [{
    meta: {
      requireAuth: false, //    
      title: '    ', //   
      icon: 'fa fa-bar-chart', //    
    },
    path: "/dashboard",
    name: "dashboard",
  },
  {
    meta: {
      requireAuth: false, //    
      title: '   ', //   
    },
    path: "Welcome",
    name: "dashboard-Welcome"
  },
  {
    meta: {
      requireAuth: false, //    
      title: '    ', //   
      icon: 'fa fa-bar-chart', //    
    },
    path: "/demos",
    name: "demos",
  },
  {
    meta: {
      requireAuth: false, //    
      title: '  Demo', //   
    },
    path: "List",
    name: "demos-List"
  },
  {
    meta: {
      requireAuth: false, //    
      title: '    ', //   
    },
    path: "List/Detail/:id?",
    name: "demos-List-Detail-id"
  },
  {
    meta: {
      requireAuth: false, //    
      title: '    ', //   
      icon: 'fa fa-bar-chart', //    
    },
    path: "/datas/UserAnalysis",
    name: "datas-UserAnalysis"
  },
  {
    path: "/",
    name: "index"
  }
];
 
 
/**
 *         
 * @param {*} list
 * @param {*} menu
 */
const iterator = (list) => {
  for (let item in list) {
    for (const m in menus) {
      if ((list[item].name === menus[m].name) && (list[item].path === menus[m].path)) {
        console.log((list[item].name === menus[m].name) && (list[item].path === menus[m].path));
        list[item].meta = menus[m].meta;
        list[item].meta.requireAuth = true;
      }
    }
    if (list[item].children && list[item].children.length > 0) {
      iterator(list[item].children);
    } else {
      return list;
    };
  }
};
 
export default (routes, resolve) => {
  routes = iterator(routes);
  console.log(routes);
};

그리고 nuxt.config.js 를 설정 합 니 다.
nuxt.config.js 다음 설정:

  router: { //                               。
    middleware: ['authorities'],
    extendRoutes: routes
  },

이 문 제 는 잠시 해결 되 었 습 니 다.routes 에 따라 태그 내 비게 이 션/사 이 드 바 메뉴/빵 부스러기 내 비게 이 션 등 을 생 성 할 수 있 습 니 다.

이상 의 nuxt 경로,과도 효과,미들웨어 의 실현 코드 는 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.
위 챗 애플 릿 개발 데이터 캐 시 기초 지식 분석 및 활용 사례 상세 설명
Bash Shell 주석 여러 줄 의 몇 가지 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage