안녕하세요 여러분 csdn: lqj_self 블로거입니다.
이것은 내 개인 블로그 홈페이지입니다.
lqj_I_Python 인공지능 비전(opencv) 엔트리부터 실전, 프론트엔드, 위챗 애플릿까지 - CSDN Blog
최신 uniapp 졸업 디자인 칼럼도 아래에 있습니다.
https://blog.csdn.net/lbcyllqj/category_12346639.html?spm=1001.2014.3001.5482
보통은 비리비리 영상에서 주로 사용하시는 몇가지 설명도 드리고,
Bilibili에 오신 것을 환영합니다:
목차
글로벌 프론트 가드
전역 사전 보호는 일반적으로 권한 제어에 사용되며 다음을 router.beforeEach사용하여 추가할 수 있습니다.
const router = createRouter({ ... })
router.beforeEach((to, from) => {
// ...
// 返回 false 以取消导航
return false
})
각 보호 방법은 두 개의 매개변수를 받습니다.
to: 진입할 목적지 경로from: 현재 출발하는 경로
반환할 수 있는 값은 다음과 같습니다.
false: 현재 내비게이션을 취소합니다.true또는undefined, 다음 경비를 호출합니다.- 경로 주소: 문자열 또는 객체. 현재 탐색을 중단하고 새 탐색을 시작함을 나타냅니다.
router.beforeEach(async (to, from) => {
// 检查用户是否已登录，并且避免无限重定向
if (!isAuthenticated && to.name !== 'Login') {
return { name: 'Login' } // 将用户重定向到登录页面
}
})이전 버전의 Vue Router에서는 세 번째 매개변수도 사용할 수 있습니다 next. 현재는 여전히 지원되므로 모든 탐색 가드에 세 번째 인수를 전달할 수 있습니다. 이 경우 next내비게이션 가드에서 한 번만 호출되는지 확인하십시오.
글로벌 파싱 가드
router.beforeResolve사용법은 router.beforeEach와 비슷합니다. 탐색이 확인되기 전에 구성 요소 내 모든 가드 및 비동기 경로 구성 요소가 해결된 후 호출됩니다. 다음은 사용자가 사용자 정의 속성에 액세스할 수 있도록 하는 예입니다 meta.
router.beforeResolve(async to => {
if (to.meta.requiresCamera) {
try {
await askForCameraPermission()
} catch (error) {
if (error instanceof NotAllowedError) {
// ... 处理错误，然后取消导航
return false
} else {
// 意料之外的错误，取消导航并把错误传给全局处理器
throw error
}
}
}
})
router.beforeResolve데이터를 가져오거나 다른 작업(모든 페이지를 입력한 후 수행됨)을 수행하기에 이상적인 장소입니다.
글로벌 포스트 후크
가드와 달리 글로벌 포스트후크는 기능을 허용하지 않으며 next다른 라우팅 주소로 이동할 수도 없습니다.
router.afterEach((to, from) => {
sendToAnalytics(to.fullPath)
})
failure그러나 세 번째 매개변수로 수신할 수 있습니다 .
router.afterEach((to, from, failure) => {
if (!failure) sendToAnalytics(to.fullPath)
})
router.afterEach분석 액세스, 페이지 제목 변경, 페이지 청구 등에 유용합니다.
루트 전용 경비원
경로 구성에서 직접 가드를 정의할 수 있습니다 beforeEnter.
const routes = [
{
path: '/users/:id',
component: UserDetails,
beforeEnter: (to, from) => {
// 取消导航
return false
},
},
]
beforeEnter가드는 경로에 진입할 때만 발사하며 params, 변경 시 query에는 발사하지 않습니다 hash. 예를 들어 /users/2from to 입력 /users/3또는 /users/2#infofrom from to 입력은 /users/2#projects실행되지 않습니다.
beforeEnter또한 다양한 경로에 대해 가드를 재사용할 때 유용한 함수 배열을 에 전달할 수 있습니다 .
// 清除 query 参数
function removeQueryParams(to) {
if (Object.keys(to.query).length)
return { path: to.path, query: {}, hash: to.hash }
}
// 清除 hash 值
function removeHash(to) {
if (to.hash) return { path: to.path, query: to.query, hash: '' }
}
const routes = [
{
path: '/users/:id',
component: UserDetails,
beforeEnter: [removeQueryParams, removeHash]
},
{
path: '/about',
component: UserDetails,
beforeEnter: [removeQueryParams]
}
]
물론 라우팅 meta속성을 사용하여 全局导航守卫위의 기능을 달성할 수도 있습니다.
구성 요소 내의 가드
선언적 API를 사용하여 구성 요소에 다음 가드를 추가할 수 있습니다.
beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave
beforeRouteEnterthis구성 요소가 아직 생성되지 않았기 때문에 가드에 액세스할 수 없습니다 . next에 콜백을 전달하여 구성 요소 인스턴스에 액세스 할 수 있습니다 . 탐색이 확인되면 콜백을 실행하고 콜백 메서드의 매개 변수로 구성 요소 인스턴스를 전달합니다.
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}
참고: 콜백 함수 전달을 지원하는 유일한 가드 beforeRouteEnter입니다 .next
beforeRouteUpdate현재 경로가 변경되지만 구성 요소가 재사용될 때 호출됩니다. 예를 들어 동적 매개변수가 있는 경로의 경우 /users/:id및 /users/1사이 /users/2를 이동할 때 호출됩니다 . 이런 일이 발생하면 구성 요소가 이미 마운트되었고 내비게이션 가드가 구성 요소 인스턴스에 액세스할 수 있기 때문입니다 this.
beforeRouteUpdate (to, from) {
// 可以使用 this
this.name = to.params.name
}
beforeRouteLeave일반적으로 사용자가 변경 사항을 저장하지 않고 갑자기 떠나는 것을 방지하기 위해 사용됩니다. 경비원은 를 반환 false하여 .
beforeRouteLeave (to, from) {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
// 取消导航并停留在当前页面
if (!answer) return false
}
컴포지션 API를 사용하여 가드를 구성 요소에 추가 onBeforeRouteUpdate하고 onBeforeRouteLeave탐색 할 수 있습니다.
<script setup lang="ts">
import { ref } from 'vue'
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
const userData = ref()
onBeforeRouteUpdate(async (to, from) => {
//仅当 id 更改时才获取用户信息
if (to.params.id !== from.params.id) {
userData.value = await fetchUser(to.params.id)
}
})
onBeforeRouteLeave((to, from) => {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
// 取消导航并停留在当前页面
if (!answer) return false
})
</script>
setup참고: 함수 호출 타이밍 으로 인해 구성 API를 사용하는 것은 존재하지 않습니다 onBeforeRouteEnter.