Vue JS在链接到嵌套路由时维护路由答案

【问题标题】：Vue JS maintaining route when linking to nested routesVue JS在链接到嵌套路由时维护路由
【发布时间】：2016-03-08 03:16:16
【问题描述】：

如果组件 A 是我的应用，并且我有一个映射到组件 B 的路由。然后组件 B 有一个 router-view 我希望能够在组件 C 和组件 D 之间切换。

当我链接到组件 C 或 D 时，它可以工作，但它会再次渲染整个路线，所以 B 再次渲染，我是滚动到顶部。

解决此问题的最佳方法是什么？嵌套应用程序？或者有没有办法链接到一个子路由，它保持路由中未更改的部分完好无损并且不完全刷新它。因此，理想情况下，只呈现网页的一部分并更改路线。

【问题讨论】：

标签： vue.js

【解决方案1】：

当您在 C 和 D 之间移动时，不应重新绘制组件 B，除非您将 canReuse 设置为 false：http://vuejs.github.io/vue-router/en/pipeline/can-reuse.html

如果您被滚动到顶部，可能是因为当 C 或 D 的内容消失时，站点高度减少到仅标题，因此自动向上滚动。您可以尝试制作组件 B height:100%，使其不会收缩

edit：嵌套路由实际上解决了这个问题。这样你就不会真正重新路由到 B，你只是在 B 的子路由中导航：

'/:param_one': {
    component: require('./RouteOne.vue'),
    name:'RouteOne',
    subRoutes:{
        '/:param_two':{
            component:require('./views/Dashboard/OtherRoute.vue'),
            name:'OtherRoute'
        }
    }
}

【讨论】：

似乎在 B 上再次调用了路由数据转换，这将 loadingRouteData 设置为 true 并调出加载微调器。来自文档：每次路由更改时也会调用 data ，即使当前组件被重用，而 activate 仅在新创建组件时调用。我想如果只是子路由更改，我不需要重新加载数据。我有一个路由参数，我可以手动检查，但是如果 B> 上没有路由参数怎么办
有一个名为activate 的路由挂钩，您可以使用它来代替data。如果路由被重用，则不会再次调用这个：vuejs.github.io/vue-router/en/pipeline/activate.html
我认为使用该组件的问题是在该转换解决之前不会显示该组件并且它没有设置 loadingRouteData。由于我的数据是异步的，它会停止更改路线，而不是立即使用加载微调器。我可以通过不从激活转换返回承诺来解决这个问题，只需将我自己的加载属性设置为 true，然后在回调中设置为 false。
是的，这里没有实现 $loadingRouteData 等效项似乎是一种疏忽...在解决 activate 挂钩之前，该组件不会显示，所以是的，您必须跳过承诺。也许您可以继续使用data 钩子，但仅在之前未加载数据的情况下加载数据，否则立即返回？
是的，这是我目前的解决方案。我的路线有一个用于加载模型的 slug 参数。所以我检查 ($route.params.slug == this.model.slug) 如果它是真的我不重新加载数据。如果路由参数 slug 与当前加载的模型 slug 不匹配，那么我会重新加载。这很好用，就像一个创可贴。