欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 资讯 > 动态设置路由标题title;动态设置路由配置meta;独享的守卫beforeEnter

动态设置路由标题title;动态设置路由配置meta;独享的守卫beforeEnter

2024/12/21 23:44:04 来源:https://blog.csdn.net/i_am_a_div/article/details/144513757  浏览:    关键词:动态设置路由标题title;动态设置路由配置meta;独享的守卫beforeEnter

案例:同一个页面即使新增,又是编辑、详情页。导致路由配置里的title无法固定
通过路由的独享的守卫beforeEnter解决配置;同时beforeEnter一定程度上可以帮助处理vue3缓存问题

      {path: "methodApplicationFormOperate",name: "MethodApplicationFormOperate",meta: { title: "新增申请单", forceUseTitle: true },component: () => import("@/views/communicationManagement/methodApplicationForm/methodApplicationFormOperate.vue"),beforeEnter: (to, from, next) => {console.log('beforeEnter==', to, from, next);if (to.query.editType == "edit") {to.meta.title = "编辑申请单"to.matched[to.matched.length - 1].meta.title = "编辑申请单"} else if (to.query.editType == "add") {to.meta.title = "新增申请单"to.matched[to.matched.length - 1].meta.title = "新增申请单"} else {to.meta.title = "申请单详情"to.matched[to.matched.length - 1].meta.title = "申请单详情"}next()},},

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com