Vue.jsでnavbarフリッカーを経験する

Question

関数が真または偽と評価される前に、私のナビゲーションバーにちらつきが発生しています。

export default { 
    methods: { 
    isAuthenticated() { 
     return this.$store.state.user.authenticated 
    } 
    }, 
    data:() => { 
    return { 
     unauthenticated: [ 
     { 
      title: 'Link1', 
      url: '/link1' 
     }, 
     { 
      title: 'Link2', 
      url: '/link2' 
     }, 
     { 
      title: 'Link3', 
      url: '/link3' 
     } 
     ], 
     authenticated: [ 
     { 
      title: 'otherLink1', 
      url: '/otherlink1' 
     }, 
     { 
      title: 'otherLink2', 
      url: '/otherlink2' 
     }, 
     { 
      title: 'otherLink3', 
      url: '/otherlink3' 
     } 
     ] 
    } 
    } 
} 

そして、ナビゲーションバーには、以下があります：

評価する必要がある機能は以下のとおりです。私は、ナビゲーションを通してクリックすると

が

<template v-if="isAuthenticated()"> 
    <b-nav is-nav-bar> 
    <b-nav-item v-for="nav in authenticated" :key="nav.title" :href="nav.url">{{nav.title}}</b-nav-item> 
    </b-nav> 
</template> 
<template v-else> 
    <b-nav is-nav-bar> 
    <b-nav-item v-for="nav in unauthenticated" :key="nav.title" :href="nav.url">{{nav.title}}</b-nav-item> 
    </b-nav> 
</template> 

ただし、認証されていないリンクが表示されるため認証されたリンクは、isAuthenticated()関数がまだ評価されていないかのように見えます。このフリッカーを取り除くにはどうしたらよいですか？

マイストアファイル（user.jsの）ファイルには、次のようになります。

export const state =() => ({ 
    headers: {}, 
    profile: {} 
}) 

export const mutations = { 
    updateHeaders (state, headers) { 
    state.headers.access_token = headers['access-token'] 
    state.headers.token_type = headers['token-type'] 
    state.headers.client = headers['client'] 
    state.headers.expiry = headers['expiry'] 
    state.headers.uid = headers['uid'] 
    if (state.headers.expiry == null) { 
     state.authenticated = false 
    } else { 
     let timeToExpiry = new Date(state.headers.expiry * 1000) 
     let now = new Date() 
     state.authenticated = now < timeToExpiry 
    } 
    }, 
    signout (state) { 
    state.headers = {} 
    state.profile = {} 
    } 
} 

ログイン/ログアウト方法はRailsのアプリへのAPI呼び出しを介して生じます。 Deviseの宝石は残りを扱います。

ありがとうございます！

編集：私はリンクがフードの下this.$router.push(url)に提出することを信じているので、私は、レイアウト/ページ/コンポーネントのためNuxt.jsを使用しています

。

b-navタグを使用すると、いずれかのリンクをクリックしたときに実行されるどのようなコードBootstrap Vue

Answer 1

bootstrap-vueを使用する場合、ナビゲーションバーにリンクを追加する2つの方法があります。 1つは、通常のhtmlアンカーを作成する:href属性にバインドすることです。もう1つは、:to属性を使用することです。この属性は、vue-routerと対話するリンクを作成します。

<b-navbar-nav v-if="isAuthenticated()"> <b-nav-item v-for="nav in authenticated" :key="nav.title" :to="nav.url">{{nav.title}}</b-nav-item> </b-navbar-nav> <b-navbar-nav v-if="!isAuthenticated()"> <b-nav-item v-for="nav in unauthenticated" :key="nav.title" :to="nav.url">{{nav.title}}</b-nav-item> </b-navbar-nav>

カプセル化するために、ここに<template>タグを使用する理由。また、 'is-nav-bar'は廃止予定です。 hereを参照してください。ここでは非推奨となります。

Answer 2

から来ているが明記されていない、私はそれがthis.$router.push(url)のようなものだと仮定します。この場合は、おそらく<router-view>にナビバーを含めている可能性があります。したがって、現在のルートを切り替えると、<router-view>内のコンポーネントが再レンダリングされるため、ナビゲーションバーが点滅します。これを解決するには、<router-view>から移動してください。

編集：そうOPは、手動でのNAVの変化以外の部品を作るために、ルートコンポーネントのデータを変更、またはvue-routerを追加し、<router-view>ウォン外ので部品をナビゲートするthis.$router.push()を使用するか、この場合には、まだvue-routerを使用していません変更または点滅しない。

とにかく、vueにビューの一部だけを再レンダリングさせるにはvueコンポーネントが必要です。単に<a>でナビゲートするか、何かがすべて破棄して再構築するので、点滅します。