vue.jsライフサイクルとページ更新が期待通りに機能しない

Question

ブラウザのアドレスバーにページが更新されたりリンクが入力された場合でも、ログインしたままにする必要があります。

私はストア内でユーザーのデータをローカルストレージに保存して読み込むためのいくつかのメソッドを作成しました。 main.jsで

私はに必要なデータをロードするには、このようなフックを作成しました：私はbeforeEnterフックを持って

new Vue({ 
    el: '#app', 
    router, 
    store, 
    render: h => h(App), 
    created() { 
     this.$store.dispatch('loadUser'); 
     const user = this.$store.getters.getUser; 
     console.log(`VUE app created. Logged-in user: ${user.username}`); 
    } 
}); 

routes.js で

path: '/account', 
    component: Account, 
    beforeEnter: (to,from,next) => { 
     const user = Store.getters.getUser; 
     console.log(`Should go to /account, user is ${user.username}`); 
     if (!user.username) { 
      next('/'); 
     } else { 
      next(); 
     } 
    } 

私は、ルータメソッドの前にvueアプリの作成を実行することを期待していますが、そうではありません。 /アカウントページを更新すると、ルータbeforeEnterが最初に呼び出され、アプリの作成が2番目になります。私のユーザは不明で、/ accountページを更新するのではなく、ログイン画面でルートページにリダイレクトされます。ユーザーが以前にログインしているし、彼の資格情報（JWTトークン）は、ローカルストレージにあるとき、私は期待/行動を望んで得ることができ、ページの更新が代わりにリダイレクトされるので要求されたページに移動しますどのように

なぜ、ルータのメソッドは、がフックを作成する前に呼び出されますか？

私vue.jsバージョンは、あなたがcreatedにあなたの行動を派遣する必要はありません2.8.2

Answer 1

です。ルータに着く前に派遣してください。

store.dispatch('loadUser') 
// create or import router 
// create Vue