web-dev-qa-db-ja.com

Vue Routerを使用してパラメータの変更に対応するためのベストプラクティス

Vue /foo/:valのようなルートを持つルーター]を使用する場合、ウォッチャーを パラメーターの変更に対応する に追加する必要があります。これにより、すべてのビューでやや煩わしいコードが重複します。 URLにパラメータがあります。

これは次の例のようになります。

export default {
    // [...]
    created() {
        doSomething.call(this);
    },
    watch: {
        '$route' () {
            doSomething.call(this);
        }
    },
}

function doSomething() {
    // e.g. request API, assign view properties, ...
}

それを克服する他の方法はありますか？ createdと$routeの変更のハンドラーを組み合わせることができますか？ウォッチャーがまったく不要になるように、コンポーネントの再利用を無効にできますか？私はVue 2を使用していますが、これはVue 1にとっても興味深いかもしれません。

vue.jsvuejs2vue-router
19
str

GitHubの問題 のおかげで見つけた答えの1つは次のとおりです。

v-forでも使用される key属性 を使用して、Vueビューの変更を追跡できます。機能させるには、属性をrouter-view要素に追加する必要があります。

<router-view :key="$route.fullPath"></router-view>

これをビューに追加すると、$routeを監視する必要がなくなります。代わりに、Vue.jsはコンポーネントの完全に新しいインスタンスを作成し、createdコールバックも呼び出します。

ただし、これは全か無かのソリューションです。私が現在開発している小さなアプリケーションでうまく機能するようです。ただし、別のアプリケーションのパフォーマンスに影響を与える可能性があります。一部のルートでのみビューの再利用を無効にしたい場合は、keyの値の設定 ルートに基づいて を確認できます。しかし、私はそのアプローチがあまり好きではありません。

30
str