🎜쿼리 매개변수🎜🎜경로? key1=val1 & key2=val2.. ..🎜🎜1. 경로를 지정하려면 이름을 사용하세요🎜2. 경로를 지정하려면 경로를 지정하세요🎜🎜 쿼리는 URL 뒤에 붙은 매개변수이므로 입력하지 않아도 상관없습니다. 없어요🎜🎜쿼리가 안 돼요🎜🎜🎜🎜<h3>
<a id="vuerouter_65"></a><strong>vue-router 매개변수 손실 문제</strong>
</h3>
<p>params 매개변수가 전달되면 설정 자리 표시자로 수신된 매개변수가 전달되고 주소 표시줄이 표시되지 않으며 새로 고침이 손실됩니다. </p>
<p>해결책: <code>this.$route.params
를 통해 매개변수를 가져와 로컬에 저장할 수 있습니다this.$route.params
获取参数保存在本地
vue-router有几种钩子函数?具体是什么及执行流程是怎样的?
vue-router
提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
- 全局路由守卫 : 可以有多个根据创建顺序调用。
-
router.beforeEach()
全局前置守卫,每次导航时都会触发。
-
router.afterEach()
全局后置路由守卫,每次路由跳转完成后。不会接受 next 函数,跳转完成已经进入到组件内了
-
router.beforResolve()
全局解析守卫,在路由跳转前,所有组件内守卫和 异步路由组件 被解析之后触发,它同样在 每次导航 时都会触发。 解析完成后导航被确定,准备开始跳转。
- 组件内路由守卫
-
beforeRouteEnter()
路由进入组件之前调用,该钩子在beforeEach
和 beforeEnter
之后。
此时还没有进入组件,组件实例还没有被创建。所以不能获取组件实例,此时 this 为 undefined,在 beforeCreate
生命周期前触发。
-
beforeRouteUpdate()
this 已经可用了,所以给 next 传递回调就没有必要了。对一个带有动态参数的路径 /foo/:id,在/foo/1 和/foo/2之间跳转的时候,由于会渲染统一的Foo组件,因此这个组件实例会被复用,这个钩子在这种情况下可以被调用。
-
beforeRouteLeave()
离开该组件时被调用,this 已经可用了,所以给 next 传递回调就没有必要了。
- 独享路由守卫
-
beforeEnter()
需要在路由配置上定义 beforeEnter 守卫,此守卫只在进入路由时触发,在 beforeEach 之后紧随执行,不会在 params、query 或 hash 改变时触发。
进入组件前的调用的顺序 beforeEach()=>beforeEnter()=>beforeRouteEnter()=>beforeResolve()
这个过程不可以使用this,因为组件实例还没有被创建,所以需要利用next函数
完整的导航解析流程
1.导航被触发。
2.在失活的组件里调用 beforeRouteLeave
守卫。
3.调用全局的 beforeEach
守卫。
4.在重用的组件里调用 beforeRouteUpdate
守卫。
5.在路由配置里调用 beforeEnter
。
6.解析异步路由组件。
7.在被激活的组件里调用 beforeRouteEnter
。
8.调用全局的 beforeResolve
守卫。
9.导航被确认。
10.调用全局的 afterEach 钩子。
11.触发 DOM 更新。
12.调用 beforeRouteEnter
守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。
keep-alive
keep-alive
可以实现组件缓存,当组件切换时不会对当前组件进行卸载。
keep-alive
标签主要是有include、exclude、max三个属性
-
include
、exclude
前两个属性允许keep-alive
有条件的进行缓存
-
max
可以定义组件最大的缓存个数,如果超过了这个个数的话,在下一个新实例创建之前,就会将以缓存组件中最久没有被访问到的实例销毁掉。
两个生命周期activated/deactivated
,用来得知当前组件是否处于活跃状态。
keep-alive的原理 缓存管理+特殊的挂载/卸载流程
特殊的卸载/挂载流程:activated/deactivated
缓存管理:LRU(Least Recently Used)最近最少使用是一种淘汰算法
特殊的卸载/挂载流程
由于不能将组件真正的卸载,所以keep-alive是将组件从原容器移动到另外一个假容器中,实现假卸载。挂载的时候从隐藏容器中再搬运到原容器。对应到组件的activated
和deactivated
🎜vue-router
제공되는 내비게이션 가드는 주로 점프하거나 취소하여 내비게이션을 보호하는 데 사용됩니다. 🎜
- 글로벌 라우팅 가드: 생성 순서에 따라 여러 호출이 있을 수 있습니다.
-
router.beforeEach()
전역 프론트 가드, 🎜는 탐색할 때마다 실행됩니다🎜.
-
router.afterEach()
각 경로 점프가 완료된 후 전역 사후 라우팅 가드입니다. 🎜다음 함수를 허용하지 않습니다🎜, 점프가 완료되었고 구성 요소에 들어갔습니다.
-
router.beforResolve()
전역 구문 분석 가드, 경로 점프 전, 모든 🎜 구성 요소 Guards 🎜 및 🎜Async 라우팅 구성 요소🎜는 구문 분석 후 실행되며 모든 탐색에서도 실행됩니다. 구문 분석이 완료되면 탐색이 결정되고 점프할 준비가 됩니다.
- 경로가 구성 요소에 진입하기 전에
-
beforeRouteEnter()
내의 경로 가드가 호출됩니다. code>beforeEach code> 및 beforeEnter
뒤. 🎜 아직 컴포넌트를 입력하지 않았으며, 컴포넌트 인스턴스가 아직 생성되지 않았습니다. 따라서 구성 요소 인스턴스를 얻을 수 없습니다. 이는 정의되지 않았으며 beforeCreate
수명 주기 전에 트리거됩니다.
-
beforeRouteUpdate()
이는 이미 사용 가능하므로 🎜 콜백을 next 🎜로 전달할 필요가 없습니다. 동적 매개변수가 있는 /foo/:id 경로의 경우 /foo/1과 /foo/2 사이를 이동할 때 통합된 Foo 구성 요소가 렌더링되므로 이 구성 요소 인스턴스가 이 경우에 다시 호출될 수 있습니다.
-
beforeRouteLeave()
는 구성 요소를 떠날 때 호출되며 이미 사용 가능하므로 🎜 콜백을 다음 🎜으로 전달할 필요가 없습니다.
독점 경로 가드 -
beforeEnter()
🎜라우팅 구성에서 beforeEnter 가드를 정의해야 합니다. 경로 🎜에 들어갈 때만 트리거되고 beforeEach 직후에 실행되며 매개변수, 쿼리 또는 해시가 변경되면 트리거되지 않습니다.
🎜구성 요소에 들어가기 전 호출 순서 beforeEach()=>beforeEnter()=>beforeRouteEnter()=>beforeResolve() 아직 컴포넌트 인스턴스가 생성되지 않았기 때문에 이 프로세스를 사용할 수 없으므로 다음 함수를 사용해야 합니다🎜🎜🎜내비게이션 파싱 프로세스 완료🎜🎜 1. 내비게이션이 트리거됩니다. 🎜 2. 비활성화된 구성 요소에서 beforeRouteLeave
가드를 호출합니다. 🎜 3. 전역 beforeEach
가드를 호출합니다. 🎜 4. 재사용된 구성 요소에서 beforeRouteUpdate
가드를 호출합니다. 🎜 5. 라우팅 구성에서 beforeEnter
를 호출하세요. 🎜 6. 비동기 라우팅 구성 요소를 구문 분석합니다. 🎜 7. 활성화된 구성 요소에서 beforeRouteEnter
를 호출합니다. 🎜 8. 전역 beforeResolve
가드를 호출합니다. 🎜 9. 내비게이션이 확인되었습니다. 🎜 10. AfterEach 후크 전역을 호출합니다. 🎜 11. DOM 업데이트를 트리거합니다. 🎜 12. beforeRouteEnter
가드를 호출하여 🎜를 next의 콜백 함수에 전달합니다. 생성된 구성 요소 인스턴스는 콜백 함수 🎜의 매개 변수로 전달됩니다. 🎜🎜🎜🎜🎜🎜keep-alive🎜🎜🎜keep-alive
는 구성 요소 캐싱을 구현할 수 있으며 구성 요소가 전환될 때 현재 구성 요소가 언로드되지 않습니다. 🎜🎜 keep-alive
태그에는 주로 include, 제외 및 max의 세 가지 속성이 있습니다. 🎜
-
include
, exclude
처음 두 개 이 속성은 keep-alive
가 조건부로 캐시하도록 허용합니다.
-
max
는 이 숫자가 초과될 경우 캐시된 구성 요소의 최대 수를 정의할 수 있습니다. 다음 새 인스턴스가 생성되면 가장 오랫동안 액세스하지 않은 캐시 구성 요소의 인스턴스가 삭제됩니다.
🎜현재 구성 요소가 활성 상태인지 확인하는 데 사용되는 두 개의 라이프 사이클 활성화/비활성화
. 🎜🎜특별 제거/마운트 프로세스: 활성화/비활성화
🎜 캐시 관리: 🎜LRU(Least Recent Used)는 제거 알고리즘입니다. 🎜🎜🎜🎜특별 제거/마운트 프로세스🎜🎜 구성 요소를 실제로 제거할 수 없으므로 연결 유지는 구성 요소를 원래 상태에서 제거하는 것입니다. 컨테이너는 다른 가짜로 이동됩니다. 가짜 제거를 달성하기 위한 컨테이너입니다. 탑재 시 숨겨진 컨테이너에서 원래 컨테이너로 이동됩니다. 구성 요소의 활성화
및 비활성화
수명 주기에 따라🎜 keepAlive는 내부 구성 요소(캐시해야 함)를 표시합니다🎜
캐싱 전략: 가장 최근에 사용됨
Map 객체 캐시를 사용하여 구성 요소를 캐시합니다. 키는 vnode.type
값이고 값은 vnode입니다. object, 왜냐하면 구성 요소의 vnode 개체(<code>vnode.comComponent
)vnode.type
值,value为vnode对象
,因为组件的vnode对象中存在对组件实例的引用(vnode.component
)
-
cache
前者用来存缓存组件的虚拟dom集合
keys
cache
에 구성 요소 인스턴스에 대한 참조가 있기 때문입니다. 전자는 다음 용도로 사용됩니다. 캐시 구성 요소의 가상 DOM 컬렉션 저장 -
keys
후자는 캐시 구성 요소의 키 컬렉션을 저장하는 데 사용됩니다.
구성 요소 ID와 태그를 기반으로 캐시 키를 생성합니다. 캐시 개체에 구성 요소 인스턴스가 캐시되었는지 확인합니다. 존재하는 경우 캐시된 값을 직접 검색하고 키에서 키 위치를 업데이트합니다(키 위치 업데이트는 LRU 교체 전략 구현의 핵심입니다). 존재하지 않는 경우 맵 객체에 컴포넌트 인스턴스를 저장하고 키 값을 저장한 다음 캐시된 인스턴스 수가 최대 설정 값을 초과하는지 확인하세요. LRU 교체 정책에 따라 사용되지 않은 인스턴스(즉, 아래 첨자가 0인 키)입니다.
(학습 영상 공유: vuejs 입문 튜토리얼,
기본 프로그래밍 영상🎜)🎜