Vue CLI Insert Navbar

그래서 최신 Vue CLI를 설치하고 프로젝트를 설정했습니다. 나는 Vue의 개념에 익숙하지만 구조에 대한 도움이 필요합니다. 누군가가 모든 페이지에서 사용할 수있는 탐색 모음을 만들고 페이지에 대한 가상 라우터 링크를 포함 할 수있는 방법을 안내해 줄 수 있습니까? 내 첫 번째 생각은 구성 요소를 Navbar.vue으로 만들고 어쨌든 App.vue로 가져와 어떤 것보다 먼저 렌더링되도록하는 것입니다. <router-view></router-view>. 이것이 올바른 방법일까요? 대신 index.html 안에 넣으려고합니까? 나는 이것을 어떻게하는지 혼란 스럽다. 나는 CSS를위한 부트 스트랩을 사용하고있다.Vue CLI Insert Navbar

index.html을 :

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>foo.ca</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
    </head> 
    <body> 
    <div id="app"></div> 
    <!-- built files will be auto injected --> 
    </body> 
</html>

App.vue는 :

<template> 
    <div id="app"> 
    <!--<img src="./assets/logo.png">--> 
    <router-view></router-view> 
    </div> 
</template> 

<script> 
    export default { 
    name: 'app' 
    } 
</script>

출처

2017-09-29 Dave

당신은 App.vue에 추가해야합니다. Index.html은 앱만 렌더링합니다.

router-view은 <router-view></router-view> 호출 내 경로에 대해 라우터 구성에서 설정 한 구성 요소 만 렌더링한다는 점을 기억하십시오. 앱은 앱 레이아웃과 같습니다.

<template> 
    <div id="app"> 
    <!--<img src="./assets/logo.png">--> 
    <!-- Assuming your navbar is looking like bootstrap --> 
    <navbar></navbar> 
    <!-- You can move container inside every page instead, if you wish so --> 
    <div class="container-fluid"> 
     <div class="row"> 
      <router-view></router-view> 
     </div> 
    </div> 

    </div> 
</template> 

<script> 
    export default { 
    name: 'app' 
    } 
</script>

출처

2017-09-29 19:01:56 cassioscabral

Vue CLI Insert Navbar

답변

관련 문제