详解vue-router 动态路由下子页面多页共活的解决方案
我们都知道vue-router的动态路由匹配对组件是原地复用的策略，需要我们在组件中根据不同的$route参数展示不同的数据，这在大部分情景下是很高效的做法，但这无疑增加了组件的复杂度，而且不同参数间切换因为是同组件复用，切换效果不加修饰的话会显得很生硬，这里放一张图片感受一下。
如果我们希望能够每个动态参数都能渲染出一个组件而不是去复用怎么办呢？
我这里提供一个简便的方案
通常动态路由我们都是用来处理详情页
constrouter=newVueRouter({
routes:[
//动态路径参数以冒号开头
{path:'/user/:id',component:User,props:true}
]
})
User.vue
{{user.name}}
我们可以发现基本上这样的组件是围绕着路径参数即例子中的id做处理和渲染，只要我们能提取到这个路径参数，并维护成列表，通过这个列表来渲染实际组件，然后通过v-show显示当前路径参数下的组件，就可以实现不同参数不同组件的效果了。
简单的来个例子
然后把这个组件作为router组件
{path:'/user/:id',component:UserPage,props:true}
现在我们完成解耦，同路由组件间参数转变切换的是真实组件了，这里再放一张图片感受一下。
这个方案说明白了很简单，但还是有一些细节要注意处理，比如记录不同参数页面的滚动条高度，比如怎么处理子页面关闭等等，我的开源项目e-admin提供的ea-view组件对这个解决方案做了完整的细节处理，有兴趣的话可以参考一下ea-view。
我正在造一个基于element-ui的中后台框架轮子e-admin欢迎star
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。