Vue2项目—基于路由守卫实现钉钉小程序动态更新标题
目录
一、需求分析
二、方法调研（插件均不行）
三、功能实现 （路由守卫+钉钉API）
一、需求分析
在钉钉小程序中，网页会将页面标题放在页面中，且切换页面的时候不能改变，故此希望，当小程序在切换不同页面的时候也能根据路由动态切换标题名称。（如下图所示：切换页面仍会有XX工作助手的标题存在）
二、方法调研（插件均不行）
原有方法：在 vue.config.js 文件中 对标题进行定义，但此时就算将设置的标题设置成空字符串也不行；
且如果此处不设置，vue CLI 会默认将 "assistant_front" 当成标题
调研新方法
方法① ： 通过引入 vue-wechat-title 插件 来动态修改Vue应用的页面标题。首先通过npm安装插件，然后在main.js中引入并使用Vue.use()安装。接着，在路由配置中利用mate属性携带title。最后，在App.vue模板中应用插件，通过$vRoute.meta.title绑定标题。
vue-wechat-title - npm
方法② ：通过引入 vue-meta 插件 来动态修改Vue应用的页面标题。
npm安装插件，然后在main.js中引入并使用Vue.use()安装。
在 App.vue 中设置默认标题和模板：
<script>export default {name: 'App',metaInfo: {title: '工作助手', // 默认标题titleTemplate: '%s - 工作助手' // 标题模板}
}
</script>在各个路由组件中定义 metaInfo：
<!-- Home.vue -->
<script>
export default {name: 'Home',metaInfo() {return {title: '首页' // 页面标题}}
}
</script>
不过到了 Vue 3 中使用 Vue Meta（推荐用 vueuse/head）
原版
vue-meta不再更新，Vue 3 推荐使用更现代的 @vueuse/head
三、功能实现 （路由守卫+钉钉API）
但是最终发现，这些方法在移动端，且在钉钉环境下，都运行的有问题，基本上最后实现的效果是可以根据路由匹配上，但是在切换路由的时候无法跳转，无法将获取到的新name赋值到新的title，于是最后采用了路由守卫的方法，并结合钉钉小程序自带API设置title的方法，一起使用，实现了最终的效果，且不依赖任何插件；
以下便是具体逻辑（需引入"dingtalk-jsapi": "^3.1.1",依赖）
// 动态设置标题 - 适配钉钉环境
router.beforeEach((to, from, next) => {console.log('=== 路由守卫 beforeEach ===');console.log('从路由:', from.path);console.log('到路由:', to.path);console.log('路由元信息:', to.meta);const title = to.meta.title || '工作助手';console.log('应设置的标题:', title);// 设置页面标题（普通浏览器）document.title = title;console.log('document.title 已设置为:', document.title);// 适配钉钉环境updatePageTitle(title);next();
});// 路由切换完成后再次设置（确保生效）
router.afterEach((to) => {console.log('=== 路由守卫 afterEach ===');console.log('当前路由:', to.path);Vue.nextTick(() => {const title = to.meta.title || '工作助手';document.title = title;console.log('afterEach 中 document.title 设置为:', document.title);updatePageTitle(title);});
});// 统一的页面标题更新函数
function updatePageTitle(title) {console.log('=== updatePageTitle 函数 ===');console.log('尝试设置标题:', title);// 首先设置文档标题document.title = title;console.log('document.title =', document.title);// 检查是否在钉钉环境中console.log('dd 对象是否存在:', typeof dd !== 'undefined');if (typeof dd !== 'undefined') {console.log('调用钉钉 API 设置标题');dd.biz.navigation.setTitle({title: title}).then(() => {console.log('钉钉标题设置成功:', title);}).catch((error) => {console.warn('钉钉标题设置失败:', error);});} else {console.log('不在钉钉环境中，跳过钉钉 API 调用');}
}