vue-router 라우팅에 관한 10가지 vuejs 인터뷰 질문(답변 분석 포함)

이 글에서는 vue-router 라우팅에 관한 vuejs 인터뷰 질문 10가지를 소개하겠습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Routing vue-router 면접 질문

1. mvvm 프레임워크란 무엇인가요?

mvvm은 Model-View-ViewModel입니다.

MVVM은 Model-View-ViewModel의 약자로 비즈니스 로직과 데이터 캡슐화를 담당합니다. UI 구성 요소를 나타내며 인터페이스와 디스플레이를 담당합니다. ViewModel은 모델 데이터의 변경 사항을 모니터링하고 보기 동작을 제어하며 사용자 상호 작용을 처리합니다. 간단히 말해 양방향 데이터 바인딩을 통해 View 레이어와 Model 레이어를 연결합니다. MVVM 아키텍처에서는 View와 Model이 직접 연결되지 않고 ViewModel을 통해 상호작용합니다. 비즈니스 로직에만 집중하고 DOM을 수동으로 조작할 필요가 없으며 View와 Model의 동기화에 신경 쓸 필요도 없습니다. (학습 영상 공유: vue 영상 튜토리얼)

2. vue-router란? 구성 요소는 무엇입니까?

• Vue Router는 Vue.js의 공식 라우팅 관리자입니다. Vue.js의 핵심과 긴밀하게 통합되어 단일 페이지 애플리케이션을 쉽게 구축할 수 있습니다.
• <router-link>和<router-view>和<keep-alive>

3. Active-class는 어떤 구성 요소의 속성입니까?

active-class는 라우터 링크 터미널 속성으로, 선택한 스타일을 전환하는 데 사용됩니다. 이 스타일은 라우터 링크 레이블을 클릭할 때 적용됩니다.

4.vue-router의 동적 라우팅을 정의하는 방법은 무엇입니까? 전달된 값을 얻는 방법은 무엇입니까?

• 동적 경로 생성에서는 경로 속성을 사용하는 동안 다음과 같이 콜론으로 시작하는 동적 경로 매개변수를 주로 사용합니다.

{
  path: '/details/:id'
  name: 'Details'
  components: Details
}

세부사항/a, 세부사항/인 경우 세부사항 디렉토리의 모든 파일에 액세스합니다. b 등은 세부 정보 구성 요소에 매핑됩니다.

• /details에서 경로를 일치시키면 매개변수 값이 this.$route.params로 설정되므로 이 속성을 통해 동적 매개변수를 얻을 수 있습니다

console.log(this.$route.params.id)

5. vue-router에는 어떤 종류의 탐색이 있습니다. ?

• Global Front Guard

const router = new VueRouter({})
router.beforeEach((to, from, next) = {
  // to do somethings
})

• to:Route, 진입할 대상을 나타내며 라우팅 개체입니다.

• from:Route는 현재 떠나는 경로를 나타내며 라우팅 객체이기도 합니다.

• next:Function, 반드시 호출해야 하는 메소드, 구체적인 실행 효과는 next 메소드의 매개변수에 따라 달라집니다. call

  • next( ): 파이프라인에 다음 후크를 입력합니다. 모든 후크가 실행되면 탐색 상태가 확인됩니다.
  • next(false): 터미널의 현재 탐색입니다. 브라우저 URL이 변경되면 URL은 from 경로에 해당하는 주소로 재충전됩니다.
  • next('/')||next({path:'/'}): 다른 주소로 이동합니다. 현재 내비게이션 터미널, 새로운 내비게이션을 수행합니다.

* 다음 메소드를 호출해야 합니다. 그렇지 않으면 후크 기능을 해결할 수 없습니다.

• 전역 포스트후크

router.afterEach((to, from) = {
 // to do somethings
})

• 포스트후크에는 다음 기능이 없으며 실행되지 않습니다. 탐색 자체를 변경하십시오.

• Route 전용 후크

  • beforEnter

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home，
      beforeEnter: (to, from, next) = {
        // to do somethings
        // 参数与全局守卫参数一样
    	}
    }
  ]
})

• 구성 요소 내 탐색 후크

const Home = {
  template: `<div</div`,
  beforeRouteEnter(to, from, next){
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不能获取组件实例 ‘this’，因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next){
    // 在当前路由改变，但是该组件被复用时调用
    // 例：对于一个动态参数的路径 /home/:id,在/home/1 和 /home/2 之间跳转的时候
    // 由于会渲染同样的 Home 组件，因此组件实例会被复用，而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 &#39;this&#39;
  },
  beforeRouteLeave(to, from, next){
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 &#39;this&#39;
  }
}

• beforeRouterEnter는 이에 액세스할 수 없습니다. 탐색이 확인되기 전에 가드가 호출되므로 새 구성 요소는 아직 생성되지 않았으므로 next에 콜백을 전달하여 구성 요소 인스턴스에 액세스할 수 있습니다. 탐색이 확인되면 콜백을 실행하고 인스턴스를 콜백의 메서드 매개 변수로 사용합니다.

const Home = {
  template: `<div</div`,
  beforeRouteEnter(to, from, next){
    next( vm = {
      // 通过 &#39;vm&#39; 访问组件实例
    })
  }
}

6. $route와 $router의 차이점은 무엇인가요?

• router는 VueRouter의 인스턴스이며 경로 점프 방법, 후크 기능 등을 포함하는 전역 라우팅 개체입니다.
• route는 라우팅 정보 개체||점프 라우팅 개체입니다. 각 경로에는 로컬 개체이며 경로, 매개변수, 해시, 쿼리, fullPath, 일치, 이름 등과 같은 라우팅 정보 매개변수가 포함된 경로 개체가 있습니다.

7 매개변수

이름만 사용할 수 있고 경로는 사용할 수 없습니다

• 매개변수는 경로에 표시되지 않습니다

브라우저 강제 새로고침 매개변수가 지워집니다.

// 监听当前路由发生变化的时候执行
watch: {
  $route(to, from){
    console.log(to.path)
    // 对路由变化做出响应
  }
}

쿼리:

• 매개변수는 다음과 같습니다. 경로에 표시되면 새로 고침되지 않습니다.
  • 이름이 지워지고 경로 path

  • beforeRouteUpdate(to, from, next){
      // to do somethings
    }

  9를 사용할 수 있습니다. vue-router

• hash

  • 의 두 가지 모드는 다음과 같습니다. onhashchage 이벤트는 창 개체에서 모니터링할 수 있습니다

    // 传递参数
    this.$router.push({
      name: Home，
      params: {
      	number: 1 ,
      	code: '999'
    	}
    })
    // 接收参数
    const p = this.$route.params

history

• 利用了HTML5 History Interface 中新增的pushState()和replaceState()方法。
• 需要后台配置支持。如果刷新时，服务器没有响应响应的资源，会刷出404，

10. vue-router实现路由懒加载（动态加载路由）

• 把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应的组件即为路由的懒加载，可以加快项目的加载速度，提高效率

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      name: 'Home'，
      component:() = import('../views/home')
		}
  ]
})

以上是经过参考很多同行分享与官方文档，汇总的一份总结，如有不对，请指出，最后感谢大家观看，求点赞，求分享，求评论，求打赏~~

更多编程相关知识，请访问：编程视频！！

위 내용은 vue-router 라우팅에 관한 10가지 vuejs 인터뷰 질문(답변 분석 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!