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

Question

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

当我 link 到组件 C 或 D 它工作但它再次呈现整个路线，所以 B 再次渲染，我滚动到顶部。

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

Answer 1

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

如果您被滚动到顶部，可能是因为当C 或D 的内容消失时，站点高度降低到刚好header，从而自动向上滚动。你可以尝试制作组件 B height:100% 这样它就不会收缩

编辑：嵌套路由实际上解决了这个问题。这样你实际上永远不会 re-routing 到 B，你只是在 B 的子路径中导航：

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

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

Vue JS maintaining route when linking to nested routes

vue.js