[편집 및 공유] vue-router 관련 인터뷰 질문 일부 (답변 분석 포함)

이 글은 Vue-Router 관련 인터뷰 질문(답변 분석 포함)을 요약하고 공유하여 기본 지식을 정리하고 Vue-Router 지식 보유량을 높이는 데 도움이 됩니다. 꼭 들러보세요!

vue-router의 원리

단일 페이지 애플리케이션에서 서로 다른 구성 요소 간 전환은 프런트 엔드 라우팅을 통해 구현되어야 합니다.

Front-end Routing

1. 키는 경로이고, 값은 페이지 콘텐츠를 표시하는 데 사용되는 구성 요소입니다.
2. 작업 프로세스: 브라우저의 경로가 변경되면 해당 구성 요소가 표시됩니다.
vue-router의 라우팅 기능: vue-router的路由作用：将组件映射到路由, 然后渲染出来

主要就是

• 如何改变URL却不引起页面刷新

• 如何检测到URL变化了  【相关推荐：vuejs视频教程、web前端开发】

路由的hash模式

• hash 是 URL 中 # 及后面的那部分，#后的url不会发送到服务器，所以改变 URL 中的 hash 部分不会引起页面刷新

• window可以监听onhashchange事件变化。当hash变化时，读取#后的内容，根据信息进行路由规则匹配，通过改变 window.location.hash 改变页面路由。

改变URL的三种方式

• 通过浏览器前进后退改变 URL
• 通过标签改变 URL
• 通过window.location改变URL

优点

• 只需要前端配置路由表, 不需要后端的参与
• 兼容性好, 浏览器都能支持

• hash值改变不会向后端发送请求, 完全属于前端路由

缺点

• hash值前面需要加#, 不符合url规范,也不美观

路由的history模式 - 利用H5的history API

• html5 的history Interface 中新增的pushState() 和 replaceState() 方法，用来在浏览历史中添加和修改记录，改变页面路径，使URL跳转不会重新加载页面。

• 类似hashchange 事件的 popstate 事件，但 popstate 事件有些不同：
  只有在做出浏览器的行为才会调用 popState，用户点击浏览器倒退按钮和前进按钮，或者使用 JavaScript 调用History.back()、History.forward()、History.go()方法时才会触发。

优点

• 符合url地址规范, 不需要#, 使用起来比较美观

缺点

• 在用户手动输入地址或刷新页面时会发起url请求, 后端需要配置index.html页面用户匹配不到静态资源的情况, 否则会出现404错误
• 兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持.

$route和$router有什么区别？

$router是VueRouter的实例对象,表示整个应用的唯一路由器对象。包含了路由跳转的方法、钩子函数等。
$route是当前路由对象,表示本组件的路由规则，每一个路由都会有一个route对象，是一个局部对象。

vue-router参数传递的几种方式，有什么区别?

, 웹 프론트엔드 개발 】

-	描述	如何指定跳转的路由	如果没有传参	可以传参没有要求的值吗
params参数	路径/params参数	必须要使用name指定路由	params是路由的一部分,如果在配置了占位符必须要有 如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。	传递路径上没有的占位符，地址栏上不会显示并且刷新会丢失
query参数	路径? key1=val1 & key2=val2....구성 요소를 경로에 매핑한 다음 렌더링	주로	방법 페이지를 새로 고치지 않고 URL을 변경하려면	URL 변경을 감지하는 방법 [관련 권장 사항: vuejs 비디오 튜토리얼

🎜라우팅의 해시 모드🎜

• 🎜hash는 URL에서 #와 다음 사이의 부분입니다. # 뒤의 URL은 서버로 전송되지 않으므로 🎜변경하세요. URL의 해시 부분은 페이지를 새로 고치지 않습니다. 🎜🎜
• 🎜창은 onhashchange 이벤트 변경 사항을 모니터링할 수 있습니다. 해시가 변경되면 # 뒤의 내용을 읽고, 그 정보를 바탕으로 라우팅 규칙을 일치시키고, window.location.hash를 변경하여 페이지 라우팅을 변경합니다. 🎜

🎜🎜URL을 변경하는 세 가지 방법🎜🎜

• 브라우저를 통해 앞뒤로 URL 변경
• 태그를 통해 URL 변경
• window.location을 통해 URL 변경

🎜🎜장점🎜🎜

• 프런트엔드에서만 라우팅 테이블을 구성하면 되며 백엔드 개입은 필요하지 않습니다.
li>
• 우수한 호환성, 브라우저 지원 가능
• 🎜해시 값 변경은 백엔드로 요청을 보내지 않으며 완전히 프런트엔드 라우팅입니다🎜

🎜🎜 단점🎜🎜

• 해시 값이 앞에 필수입니다. #을 추가하면 URL 사양을 준수하지 않고 아름답지 않습니다.

🎜🎜 라우팅의 기록 모드 - H5의 기록 API 사용🎜

• 새로운 pushState() 및 replaceState( ) 🎜html5의 기록 인터페이스에 있는 메소드는 검색 기록에 기록을 추가 및 수정하고, 페이지 경로를 변경하고, 🎜페이지를 다시 로드하지 않고 URL을 이동하도록 만드는 데 사용됩니다🎜. 🎜
• 🎜 popstate 이벤트는 hashchange 이벤트와 유사하지만 popstate 이벤트는 약간 다릅니다. 🎜는 🎜를 수행한 후에만 호출됩니다. 브라우저의 동작🎜 popState는 사용자가 브라우저의 뒤로 버튼과 앞으로 버튼을 클릭하거나 JavaScript를 사용하여 History.back(), History.forward() 및 History.go() 메서드를 호출할 때 트리거됩니다. 🎜

🎜🎜장점🎜🎜

• 🎜URL 주소 사양을 준수하여 #이 필요하지 않으며 사용하기가 더 아름답습니다🎜

🎜🎜 단점🎜🎜

• 사용자가 수동으로 주소를 입력하거나 페이지를 새로 고치면 URL 요청이 시작되므로 사용자가 정적 리소스와 일치할 수 없도록 백엔드에서 index.html 페이지를 구성해야 합니다. 404 오류가 발생합니다.
• 호환성 HTML5 기록의 새로운 pushState() 및 replaceState() 메서드를 활용합니다. 특정 브라우저의 지원이 필요한 객체입니다.
ul>🎜🎜🎜$route와 $router의 차이점은 무엇인가요? 🎜🎜🎜$router는 VueRouter의 인스턴스 객체로, 전체 애플리케이션에 대한 유일한 라우터 객체를 나타냅니다. 라우팅 점프 방법, 후크 기능 등이 포함되어 있습니다. 🎜 $route는 이 구성 요소의 라우팅 규칙을 나타내는 현재 라우팅 개체입니다. 각 경로에는 로컬 개체인 경로 개체가 있습니다. 🎜🎜🎜🎜Vue-router 매개변수는 여러 방식으로 전달되는데, 차이점은 무엇인가요?🎜🎜🎜🎜params 매개변수🎜🎜Path/params 매개변수🎜🎜경로를 지정하려면 name을 사용해야 합니다🎜🎜params 자리 표시자가 구성된 경우 이를 포함해야 합니다. 이 경로에 params 매개변수가 있지만 점프 중에 이 매개변수가 전달되지 않으면 점프가 실패하거나 페이지에 콘텐츠가 없습니다. 🎜🎜🎜배송 경로에 없는 자리 표시자는 주소 표시줄에 표시되지 않으며 새로 고침 후에는 사라집니다.🎜🎜🎜🎜쿼리 매개변수🎜🎜경로? 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에는 몇 개의 후크 기능이 있습니까? ? 정확히 무엇이고 실행 과정은 어떻게 되나요? 🎜

🎜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는 이 숫자가 초과될 경우 캐시된 구성 요소의 최대 수를 정의할 수 있습니다. 다음 새 인스턴스가 생성되면 가장 오랫동안 액세스하지 않은 캐시 구성 요소의 인스턴스가 삭제됩니다.
🎜현재 구성 요소가 활성 상태인지 확인하는 데 사용되는 두 개의 라이프 사이클 활성화/비활성화. 🎜

🎜keepalive 원칙 캐시 관리 + 특수 마운트/마운트 해제 프로세스

🎜특별 제거/마운트 프로세스: 활성화/비활성화🎜 캐시 관리: 🎜LRU(Least Recent Used)는 제거 알고리즘입니다. 🎜🎜🎜🎜특별 제거/마운트 프로세스🎜🎜 구성 요소를 실제로 제거할 수 없으므로 연결 유지는 구성 요소를 원래 상태에서 제거하는 것입니다. 컨테이너는 다른 가짜로 이동됩니다. 가짜 제거를 달성하기 위한 컨테이너입니다. 탑재 시 숨겨진 컨테이너에서 원래 컨테이너로 이동됩니다. 구성 요소의 활성화 및 비활성화 수명 주기에 따라🎜 keepAlive는 내부 구성 요소(캐시해야 함)를 표시합니다🎜
• 내부 구성 요소의 vnode 객체에 shouldKeepAlive 속성을 추가하여 구성 요소가 언로드될 때 해당 구성 요소는 실제로 언로드되지 않고 캐시되어야 함을 렌더러에 알립니다.

• 내부 구성 요소의 vnode 객체에 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 입문 튜토리얼,

기본 프로그래밍 영상🎜)🎜

-	설명	점프 경로 지정 방법	매개 변수가 전달되지 않은 경우	전달할 수 있습니다. 요구사항이 없는 매개변수는 값입니다

위 내용은 [편집 및 공유] vue-router 관련 인터뷰 질문 일부 (답변 분석 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!