Vue CLI Insert Navbar

最新のVue CLIをインストールしてプロジェクトをセットアップしました。私はVueのコンセプトに精通していますが、構造に関する助けが必要です。誰かが私にすべてのページで使用されるナビゲーションバーをどのように作成でき、ページのためのvue-routerリンクを含んでいるのか教えてくれますか？私の最初の考えは、コンポーネント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

答えて

関連する問題