web-dev-qa-db-ja.com

Vue Router beforeRouteEnterまたはWatchを使用して単一ファイルコンポーネントのメソッドをトリガーする方法

単一ファイルコンポーネントとVueルーターを使用してVue.jsのアプリで作業しています。ユーザーが検索するたびに検索結果を再入力するメソッドを実行する必要がある検索コンポーネントがありますルートを訪問します。「作成」フックのため、ルートが最初に訪問されたときにメソッドは正しく実行されます。

created: function() {
    this.initializeSearch();
  },

しかし、ユーザーがルートを離れて（たとえば、アプリに登録またはログインするために）検索ページに戻ったとき、次回のアクセスでthis.initializeSearch（）を自動的にトリガーする方法を見つけられないようです。

ルートは次のようにindex.jsで設定されます。

import Search from './components/Search.vue';
import Login from './components/Login.vue';
import Register from './components/Register.vue';

// Vue Router Setup
Vue.use(VueRouter)

const routes = [
  { path: '/', component: Search },
  { path: '/register', component: Register },
  { path: '/login', component: Login },
  { path: '*', redirect: '/' }
]

export const router = new VueRouter({
  routes
})

「watch」または「beforeRouteEnter」を使用する必要があることを収集しましたが、どちらも動作するようには見えません。

私の検索コンポーネント内で「ウォッチ」をそのように使用してみました：

watch: {
    // Call the method again if the route changes
    '$route': 'initializeSearch'
  }

また、単一のファイルコンポーネントでbeforeRouteEnterコールバックを適切に使用する方法を説明するドキュメントが見つからないようです（vue-routerのドキュメントはあまり明確ではありません）。

これに関するどんな助けでも大歓迎です。

vue.jscomponentswatchvue-router
8
Adam Sweeney

ユーザーがルートにアクセスするたびに検索結果を再入力したいので。

次のように、コンポーネントでbeforeRouteEnter()を使用できます。

beforeRouteEnter (to, from, next) { 
  next(vm => { 
    // access to component's instance using `vm` .
    // this is done because this navigation guard is called before the component is created.            
    // clear your previously populated search results.            
    // re-populate search results
    vm.initializeSearch();
    next();
  }) 
}

ナビゲーションガードの詳細については、こちらをご覧ください こちら

これが working fiddle です

10
Vamsi Krishna