使用Vue路由器对Params更改做出反应的最佳实践

Question

使用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来说也许很有趣.

Answer 1

由于GitHub问题我刚刚找到的一个可能答案如下.

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

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

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

但是,这是一个全有或全无的解决方案.它似乎在我正在开发的小应用程序上运行良好.但它可能会影响另一个应用程序的性能.如果你真的想禁用仅部分航线视图的重用,你可以看看设置key的值根据路线上.但我真的不喜欢这种方法.