25

当使用带有路由的 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 来说可能也很有趣。

4

1 回答 1

46

由于GitHub 问题，我刚刚找到了一个可能的答案，如下所示。

可以使用也用于让 Vue 跟踪视图中的更改的key属性。v-for为此，您必须将属性添加到router-view元素：

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

将此添加到视图后，您无需再观看$route。相反，Vue.js 将创建一个全新的组件实例并调用created回调。

然而，这是一个全有或全无的解决方案。它似乎在我目前正在开发的小型应用程序上运行良好。但它可能会对另一个应用程序的性能产生影响。如果您真的想仅对某些路由禁用视图的重用，您可以查看基于路由key设置的值。但我真的不喜欢这种方法。

于 2016-11-03T15:33:23.630 回答