vue router动态路由下让每个子路由都是独立组件的解决方案
2018-04-24 11:32
1061 查看
vue-router 之动态路由
vue-router官网上面是这样说的 // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 然后,我就这样写了: this.$router.push({path:'manage', query: {id: 'tasklist'}})1 结果很明显,失败了。然后我就默默的再次看了一下官网,结果发现了这句话 // 命名的路由 router.push({ name: 'user', params: { userId: 123 }}) // 带查询参数,变成 /register?plan=private router.push({ path: 'register', params: { plan: 'private' }}) 注意:如果提供了 path,params 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path: const userId = 123 router.push({ name: 'user', params: { userId }}) // -> /user/123 router.push({ path: `/user/${userId}` }) // -> /user/123 // 这里的 params 不生效 router.push({ path: '/user', params: { userId }}) // -> /user 谨记啊,动态实现二级路由,需要先用变量保存二级路由名称(let router = 'tasklist'),然后调用this.$router.push({path: `/user/${router}`}).
下面看下vue router动态路由下让每个子路由都是独立组件的解决方案
因为 vue-router 对嵌套路由采用的是组件复用策略,这在大部分场景的确是高效的做法,但是如果遇到这种情况:
就是要求多个子路由共活,并且有频繁来回切换需求的话,就很希望能让每个子路由都是独立组件了,虽然可以通过监听路由切换
watch: { '$route'(to) { if (to.meta.path === '/page/buy-details') { this.id = to.params.id; this.state() } } },
去实时处理更新的数据,我之前一直都是这么做的,包括上面那副动图的页面,但是这真的很麻烦,要让用户切换中准确的回到切换前页面的显示状态,要考虑的东西太多,于是想出了一个解决方案:
子路由组件不涉及实际业务代码,只维护一个打开过的id列表,路由切换到这边时,判断id,没打开过的添加,通过这个列表循环出实际的子路由组件,v-show当前id的,这样就能实现每个实例都是独立的了
我按这个思路写出一个 mixins
details-page.js
export default { watch: { '$route'(to, from) { this.detailsLeave(from); this.detailsOpen(to); } }, data() { return { pagePath: '', pageId: 0, pages: {} } }, methods: { /** * 子页面打开触发 * @param route */ detailsOpen(route) { if (this.detailsPathGet(route.path) === this.pagePath) { if (!this.pages[route.params.id]) { this.$set(this.pages, route.params.id, { id: route.params.id, scrollTop: 0 }) } //路由打开 跳转滚动条 this.pageId = route.params.id; this.$nextTick(()=>{ this.$parent.$el.firstChild.scrollTop = this.pages[route.params.id].scrollTop; }); } }, /** * 路由切换触发 * 判断离开的路由是否是当前页面,如果是则记录滚动条高度 * @param route */ detailsLeave(route) { if (this.detailsPathGet(route.path) === this.pagePath) { if (this.pages[route.params.id]) { //记录滚动条高度 此处针对ea-admin后台 不同的框架要记录的滚动条el不同 this.pages[route.params.id].scrollTop = this.$parent.$el.firstChild.scrollTop ; } } }, /** * 子页面关闭函数 * @param id */ detailsClose(id) { delete this.pages[id] }, /** * 取路由不含最后一项参数的地址 * @param path * @returns {string} */ detailsPathGet(path) { const i = path.lastIndexOf('/'); return path.substr(0, i); } }, mounted() { //通过当前路由地址创建页面识别地址 注:只对path: '/user/:id' 有效 当 path: /user/:id/profile 失效 this.pagePath = this.detailsPathGet(this.$route.path); //执行第一次子页面打开 this.detailsOpen(this.$route); //监听标签关闭消息 此处针对ea-admin后台 不同框架监听关闭方式不同 this.$tabs.onRemove((page, next) => { //收到标签关闭回调,判断关闭的是否是当前页面 if (page._path === this.pagePath) { //触发子页面删除 this.detailsClose(page.id) } next() }) } }
Details.vue
<template> <div> <your-component v-for="item in pages" :id="item.id" :key="item.id" v-show="item.id === pageId"> </your-component> </div> </template> <script> import YourComponent from ''; import detailsPage from '../mixins/details-page' export default { name: 'DetailsPage', components: {YourComponent}, mixins: [detailsPage], } </script>
这样子组件可以只专注处理自己的固定数据,因为组件唯一,不用再去烦恼为每个id存储视图状态了。
总结
以上所述是小编给大家介绍的vue router动态路由下让每个子路由都是独立组件的解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- vue刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结
- Vue异步组件处理路由组件加载状态的解决方案
- iOS CocoaPods组件平滑二进制化解决方案
- 消息智能路由组件SmartRoute
- TWaver 为电信运营支撑系统(OSS)的开发提供“一站式”的组件产品和解决方案,是快速设计、开发和部署OSS的利器
- flex 多 State(场景)下组件不能访问的解决方案
- 安装完office2010 后 在组件服务里DCOM配置中找不到的解决方案
- 寻 asp下无组件大文件上传 解决方案
- 组件访问被拒绝的解决方案
- 【XNA 4】XNA中2D游戏照相机组件+分屏模式解决方案
- iOS使用核心的50行代码实现一个路由组件
- 标准功能模块组件 -- “文档管理组件,网络文档管理,网络存储”,B/S版本组件可独立运行,也可集成到其他项目里,数据结构清晰思路严谨
- 通用权限管理系统组件 (GPM - General Permissions Manager) 中实现多子系统的集中统一管理,可以集成部署也支持独立部署
- 小程序解决方案 Westore - 组件、纯组件、插件开发
- 在服务器上使用第三方独立组件对Word/Excel进行编程
- 网络叠加路由叠加小型网络解决方案
- vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制、slot传值
- 标准功能模块组件 -- “文档管理组件,网络文档管理,网络存储”,B\S版本组件可独立运行,也可集成到其他项目里,数据结构清晰思路严谨
- vue教程3-01 路由、组件、bower包管理器使用
- remoting通过路由,防火墙解决方案。