首页 文章

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

提问于
浏览 次
12

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

vue.js vuejs2 vue-router

1 回答

  • 23

    我刚刚发现的一个可能的答案归功于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 . 但我真的不喜欢这种方法 .

    回复于

相关问题