vue-router navbarを永続化する方法は？

Question

私はReactから来ているVueを学んでいて、navbarを永続させる正しい方法が何かを考えています - 私はそこにルータリンクがあるナビゲーションを持っています。

ルータリンクが動作するnavbarコンポーネントがありますが、別のルートに向かうときに再ロードされています。ボディコンポーネントの「外側」にそれを保持する方法はありますか？それは新しいルートに向かうときに再レンダリングされないなどですか？

私はルータビューの外にそれを入れてみましたが、それはどこにもレンダリングされません。

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

同じことが内部進みます。

どのようにしてNavbarを永続化できますか？それがルータに入るすべてのコンポーネントの親であるべきか、またはベストプラクティスは何ですか？

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> 

とメインVueのインスタンスにベースのアプリケーションをマウントします。

app.js

import Vue from 'vue' 
import VueRouter from 'vue-router' 
import App from ''./components/App.vue // import the base component 

Vue.use(VueRouter); 

// import views you want to serve up in `router-view` 
import Foo from './components/views/Foo.vue' 
import Bar from './components/views/Bar.vue' 

const routes = [{ 
    path: '/foo', 
    component: Foo 
    }, 
    { 
    path: '/bar', 
    component: Bar 
    }, 
] 

const router = new VueRouter({ 
    mode: 'history', 
    routes 
}) 

new Vue({ 
    render: h => h(App), // mount the base component 
    router 
}).$mount('#app') 

それはすべてを設定する必要があります。さて、順番にナビゲーションバーを使用すると、タグ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/