javascript - vuejs中，如何点击路由，切换视图，切换的视图中，再次切换相同路由？

Question

是在是不知道，怎么形容，直接上图了。
就像淘宝中的功能一样，点击黑框部分，跳转路由，切换view，然后切换来的view中又有可以点击的路由，再次切换相同，如此循环。并且可以返回，本地刷新后也可以返回。

我想出的方案，
1、用router-view，写一条路由，直接v-link路由就可以了，但是发现一个问题，就是滚动条会记录上一个页面的位置，并且切换view后，滚动条依旧在哪个位子，并且返回的时候，会在当前页面先滚动到上一个页面记录的位置，再跳回上一个页面。设置了saveScrollPosition，无效。
2、用路由嵌套，但是，只能嵌套几次，而且要写大量的路由名，调用同一个模版，无意思。
3、嵌套使用router-view，但是提示是片段实例，报错。
4、写成复用组件，但是路由就无法操作，而且刷新后，会无法返回。
以上是我想的4个解决方案，但是都有小瑕疵，求告知，好的解决方案。由于论坛不能发图，所有来知乎了

Answer 1

我想说说复用组件，看上没的图，跳转前后是的ui一模一样的，只是数据不同，这里完全时可以复用组件的。而路由的模式采用/goods/:goodsId的模式。这样可以在一个<router-view>中复用组件。
在组件的route中设置data钩子，来获取数据：

{
    route: {
        data: function(transition) {
            //从服务器接口获取商品数据
        }
    }
}

关于你说的刷新返回确实有点麻烦，我想到的时，在第一次进入商品页面的时候，在本地记录商品id。刷新的时候，获取刷新事件，再判断本地有没有商品id,如果有，就router.go()到相应地址。

这是我目前对vue的实践：https://github.com/toplan/vue-spa-example