vue router动态路由下让每个子路由都是独立组件的解决方案
发布时间：2020-12-17 02:19:25 所属栏目：百科 来源：网络整理
导读：vue-router 之动态路由 /user/123router.push({ path: `/user/${userId}` }) // -> /user/123// 这里的 params 不生效router.push({ path: '/user',params: { userId }}) // -> /user谨记啊，动态实现二级路由，需要先用变量保存二级路由名称(let router = '
|
vue-router 之动态路由 /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 对嵌套路由采用的是组件复用策略，这在大部分场景的确是高效的做法，但是如果遇到这种情况： 就是要求多个子路由共活，并且有频繁来回切换需求的话，就很希望能让每个子路由都是独立组件了，虽然可以通过监听路由切换 去实时处理更新的数据，我之前一直都是这么做的，包括上面那副动图的页面，但是这真的很麻烦，要让用户切换中准确的回到切换前页面的显示状态，要考虑的东西太多，于是想出了一个解决方案： 子路由组件不涉及实际业务代码，只维护一个打开过的id列表，路由切换到这边时，判断id，没打开过的添加，通过这个列表循环出实际的子路由组件，v-show当前id的，这样就能实现每个实例都是独立的了 我按这个思路写出一个 mixins details-page.js {
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 这样子组件可以只专注处理自己的固定数据，因为组件唯一，不用再去烦恼为每个id存储视图状态了。 总结以上所述是小编给大家介绍的vue router动态路由下让每个子路由都是独立组件的解决方案。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |