vue-router动态路由子页面多页面共活解决方案

我们都知道vue-router的动态路由匹配是对组件的就地复用策略，需要我们根据不同的$route显示不同的组件parameters数据，这在大多数场景下是非常高效的，但无疑增加了组件的复杂度，而且由于不同参数之间的切换被同一个组件复用，如果不做修改，切换效果会显得生硬。在这里用一张图感受一下。如果我们希望能够为每个动态参数渲染一个组件而不是重用它怎么办？这里我提供一个简单的解决方案。通常，动态路由用于处理详情页。constrouter=newVueRouter({routes:[//动态路径参数以冒号开头{path:'/user/:id',component:User,props:true}]})User.vue我们可以发现，基本上这样的组件都是围绕路径参数，也就是例子中的id进行处理和渲染的，只要我们能够把这个路径参数提取出来，维护成一个列表，渲染通过这个列表显示实际的组件，然后通过v-show显示当前路径参数下的组件，可以达到不同参数不同组件的效果。简单示例