vue-router navbar를 유지하는 방법은 무엇입니까?

Question

React에서 오는 Vue를 배우고 있으며 navbar를 유지하는 올바른 방법이 무엇인지 궁금합니다. 라우터 링크가있는 탐색 기능이 있습니다.

작동하는 라우터 링크가있는 navbar 구성 요소가 있지만 다른 경로로 이동할 때 다시로드 중입니다. 신체 구성 요소의 "외부"에 그것을 유지할 수있는 방법이 있습니까? 새로운 경로로 향하면 다시 렌더링되지 않습니까?

나는 라우터 뷰 외부에서 퍼팅 시도했지만 그것은 어디 렌더링하지 않습니다

<template> 
    <div id="app"> 
    <topnavbar> 
    </topnavbar> 
    <router-view> 
    </router-view> 
    </div> 
</template> 

같은이 내부 이동합니다.

어떻게 내비게이션을 유지하나요? 라우터에 들어가는 모든 구성 요소의 부모이거나 모범 사례는 무엇입니까?

Answer 1

너의 navbar가 router-view 바깥 쪽에서 렌더링되어야합니다. 설정 방법은 다음과 같습니다 (이미 많이했을 수 있습니다). 이제

App.vue (기본 앱)

<template> 
    <topnavbar /> 
    <router-view /> 
</template> 

<script type="text/javascript"> 
    import topnavbar from './topnavbar.vue' 
    export default{ 
    components:{ 
     topnavbar // register component 
    } 
    } 

</script> 

당신이해야 할 모든 라우터를 설정하고있다 :

첫째, 모든 경로를 제공하는 기본 응용 프로그램 시작 메인 뷰 인스턴스에 기본 앱을 마운트 :

는

을 app.js

모든 것을 설정해야합니다. 이제 위해 네비게이션 바에는 태그 router-link를 사용하여 고정하지 있는지 확인 새로 고침하지 않도록하기 :

Topnavbar.vue를 이제 앱에서 구성 요소를 제공한다

<div id="topnav"> 
    <ul> 
    <li><router-link to="foo">Foo</router-link></li> 
    <li><router-link to="bar">Bar</router-link></li> 
    <ul> 
</div> 

다른 페이지로 이동할 때마다 topnavbar을 다시 렌더링하지 않아도됩니다. 여기

는 JSFiddle입니다 : https://jsfiddle.net/ukoebmwo/