使用 Vue Router 响应参数变化的最佳实践

Question

当 Vue Router 与 /foo/:val 这样的路由一起使用时，您必须向 react for parameter changes 添加一个观察者。这会导致在 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 也可能很有趣。

Answer 1

感谢 GitHub issue 我刚刚找到的一个可能的答案如下。

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

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

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

但是，这是一个孤注一掷的解决方案。它似乎适用于我目前正在开发的小型应用程序。但它可能会影响另一个应用程序的性能。如果你真的只想禁用某些路由的视图重用，你可以看看设置 key 的值 based on the route。但我不太喜欢这种方法。

使用 Vue Router 响应参数变化的最佳实践

Best Practice for Reacting to Params Changes with Vue Router

vue.js

vue-router

vuejs2