라우팅 점프

두 가지 방법 
1. URL 점프 직접 
    은이 router.push의 $ ( '/ 코스'); 
    <- 링크 라우터 = "/ 코스"로> 물론 페이지 </ 라우터 링크> 
의 라우팅 2. 별명은 점프 
    ({: 물론 이름}); 다음은이 $의 router.push 
    <- 링크 라우터 =에 "{이름 : '물론'}"> 물론 페이지 </ 라우터 링크>를

또한 점프 페이지 아래로 수

뒤로 이전에 
다음은이 $의 router.go (-1); 
(이 사건은 역사를 가지고 있어야합니다) 다음 페이지로 
이 $의 router.go (1).;

II. 대중의 참여를 라우팅

두 가지 방법

첫 번째

router.js

노선 : 
    // ... 
    { 
        경로 '/ 코스 / 세부 / : ID' 
        이름 '코스 디테일' 
        성분 : CourseDetail 
    } 
]

점프 .vue

<템플릿> 
    <! -标签跳转-> 
    {{course.name}} </ 라우터 링크> < "/ detail` / 과정 / $ {course.id}`"=에 라우터 링크> 
< / 템플릿> 
<script> 
    // ... 
    goDetail () { 
        //逻辑跳转
        이 $의 router.push (`/ 과정 / $ {this.course.id} / detail`).; 
    } 
</ SCRIPT>

.vue 받기

()는 {생성 된 
    ID를하자 =이 $ route.params.id.; 
}

두 번째

router.js

노선 : 
    // ... 
    { 
        경로 '/ 코스 / 세부' 
        이름 '코스 디테일' 
        성분 : CourseDetail 
    } 
]

점프 .vue

<템플릿> 
    <! -标签跳转-> 
    <라우터 링크 : =에 "{ 
            이름 : '물론 디테일', 
            쿼리 : {ID : course.id} 
        }"> {{course.name}} < / 라우터 링크> 
</ 템플릿> 
<script> 
    // ... 
    goDetail () { 
        //逻辑跳转
        이 $의 router.push ({. 
            이름 : '물론 디테일', 
            쿼리 : { 
                ID : this.course .ID 
            } 
        }); 
    } 
</ SCRIPT>

.vue 받기

()는 {생성 된 
    ID를하자 =이 $ route.query.id.; 
}

III. 크로스 구성 요소 대중 참여

1. 당신은 십자 구성 요소의 매개 변수 전달을 완료 할 수 있습니다

// 1) 로컬 스토리지 : 데이터를 영구적으로 저장 
// 2) sessionStorage를 : 데이터의 임시 저장소 (데이터 페이지), 다시 종료 한 다음 다시 엽니 탭 데이터 재설정하지 않습니다 새로 고침 
// 3) 쿠키 : 일시적 또는 영구적으로 저장된 데이터를 (만료에 의해 결정할 시간) 
// 4) vuex웨어 하우스 (store.js) : 데이터의 임시 저장 () 페이지 데이터 재설정을 새로 고침

2.vue 창고 플러그인

store.js 프로필

Vuex.Store 새로운 새 기본 내보내기 ({ 
    주 : { 
        제목 : '기본' 
    }, 
    돌연변이 : { 
        돌연변이 상태를 제공 세터 // 속성 
        // setter 메소드 이름 임의하지만,이 개 매개 변수 목록 고정 : 상태, NEWVALUE을 
        setTitle이라는 (주, NEWVALUE) { 
            state.title = NEWVALUE; 
        } 
    } 
    작업 : {} 
})

구성 요소의 변수 창고에 할당 될 수있다

이. $ store.state.title = '에 newTitle' 
이. $의 store.commit ( 'setTitle이라는'을 '에 newTitle')

어떤 구성 요소의 변수 값을 취할 수 창고

CONSOLE.LOG (이. $의 store.state.title)

III. 구성의 VUE-쿠키 및 플러그인 Axios의

1. VUE-쿠키 플러그

쿠키는 일반적으로 토큰을 저장하는 데 사용됩니다

토큰 란 1 
    토큰 안전 인증의 문자열 
생성 2. 
    데이터 전경 송신 배경 토큰을 통한 데이터 전송에있어서 발생한다 
3. 누가 저장 
    배킹 스토어 (세션 테이블, 파일, 메모리 버퍼) 앞에 저장 (쿠키) 
4. 사용하는 방법 
    (요청 후 로그인 필요) 인증을 완료하는 배경에 전경에 제출 프런트 데스크 (로그인 인증 과정)에 다시 씨는 서버를 
전 항목 (5)의 분리 후 대만 
    토큰 렌더링 배경, 토큰 전달, 전송, 프런트 데스크에 자신의 가게에 반환 요청은 배경 조사는 로그인 한 돌아갈 사용자 토큰 완료

플러그인 VUE - 쿠키 설치

명령 입력 단자 
>는 : VUE-쿠키를 설치 cnpm

main.js 구성 파일

// 최초의 
'VUE-쿠키'에서 가져 오기 쿠키 // 가져 오기 플러그인 
Vue.use (쿠키),로드 // 위젯 
새로운 새로운 뷰 ({ 
    // ... 
    쿠키, // 위젯 쿠키 프로토 타입 $를 사용하도록 구성 
}). 마운트 $ ( '# 응용'); 

// 초 
'VUE-쿠키 "가져 오기 쿠키 // 수입 플러그 
직접 쿠키 배치 Vue.prototype $ 쿠키 = 쿠키 ;. // $ 원형 플러그

용도

//增(改) : 키, 값, 특급 (过期时间) 
// 1 = '1 초'| '1m'| '1 시간'| '1D' 
이 $의 cookies.set ( '토큰'토큰 '(1Y).'); 

//查: 키 
. this.token =이 $의 cookies.get ( '토큰'); 

//删: 키 
.이 $의 cookies.remove ( '토큰');

2. Axios의 플러그인

설치

> Axios의 설치 cnpm

main.js 구성

'Axios의'// 가져 오기 플러그인에서 수입 Axios의 
Vue.prototype $의 Axios의 = Axios의 ;. // $ 프로토 타입 플러그는 Axios의 직접 배치

용도

this.axios ({ 
    URL : '요청 인터페이스' 
    방법이 '수 | POST 요청을' 
    데이터 : 제출 된 데이터 {포스트 등}, 
    params 객체를 파라미터 : {데이터를 제출받을} 
}) 당시 (요청 성공 콜백 함수). .catch (요청 콜백 함수 실패)

경우

//请求얻을 
.이 Axios의 $ ({ 
    URL을 'http://127.0.0.1:8000/test/ajax/', 
    방법, '수' 
    PARAMS : { 
        이름 : this.username 
    } 
}). 다음 (기능 (대응) { 
    CONSOLE.LOG (대응) 
}) 캐치 (함수 (에러) {. 
    CONSOLE.LOG (오차) 
}); 

// 게시물请求
.이 Axios의 $ ({ 
    URL을 'http://127.0.0.1:8000/test/ajax/' 
    방법 '포스트' 
    데이터 : { 
        이름 : this.username 
    } 
}). 다음 (기능 (대응) { 
    CONSOLE.LOG (대응) 
}) 캐치 (함수 (에러) {. 
    CONSOLE.LOG (오차) 
});

미들웨어 CSRF 잘라 필요 백 엔드 및 크로스 도메인 문제를 해결하기 위해 필요

크로스 도메인 문제 (동일 출처 정책)

// 다시 전경에 요청을 받았으며, 데이터 수신 요청 정보를 수신 할 수있다, 요청 된 정보를 전송 로컬 서버 요청에없는 데이터 거부 반응, 이것은이라고한다 - 도메인 간 문제 (원본 정책 CORS를) 

/ 세 가지의 경우 / 크로스 도메인 결과 
일치하지 않는 포트) 1 @ 
// 2) IP 일관성 
의 // 3) 계약 

// 어떻게 장고 해결하기 위해 - 장고 고르 헤더 모듈 
설치) 1 @를 : pip3 장고 - 고르 헤더를 설치 
// 2) 등록 
INSTALLED_APPS = 
    ... 
    'corsheaders' 
] 
// 3)의 중간에 배치 :. 
미들웨어 = 
    ... 
    'corsheaders.middleware.CorsMiddleware' 
] 
// 4) 도메인을 가로 질러 배치 :. 
CORS_ORIGIN_ALLOW_ALL = TRUE

3. 요소 플러그인 UI

설치

> cnpm I 소자 UI -S