使用 Vue Router 响应参数更改的最佳实践

Posted 2023-02-22

【中文标题】使用 Vue Router 响应参数更改的最佳实践

【英文标题】：Best Practice for Reacting to Params Changes with Vue Router

【发布时间】：2017-03-17 05:33:42

【问题描述】：

当使用带有 /foo/:val 之类的路由的 Vue 路由器时，您必须向 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 来说可能也很有趣。

【问题讨论】：

嗯。 v1 路由器有一个 canReuse 但我在 v2 中没有看到。很有趣。

@ceejayoz 你是对的，它在那里但是has been removed。

好吧，？？？？！为这个问题加注星标。

【参考方案1】：

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

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

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

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

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

【讨论】：

这行得通，谢谢，但是我在这些路由组件中有子组件，它们没有得到保留。我看到每次我在两个单独安装且仅安装一次的路由组件之间切换时，它们都会发出已安装的事件。有没有办法让他们的子组件也保持活力？ 将所有孩子折叠成一个，即使我使用钥匙。

谢谢，它仍然可以与 Vue3 完美配合