Vue2项目—基于路由守卫实现钉钉小程序动态更新标题_钉钉小程序使用vue

目录

一、需求分析 

二、方法调研（插件均不行）

三、功能实现 （路由守卫+钉钉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 中设置默认标题和模板： 

export default { name: \'App\', metaInfo: { title: \'工作助手\', // 默认标题 titleTemplate: \'%s - 工作助手\' // 标题模板 }}

 在各个路由组件中定义 metaInfo：

export default { name: \'Home\', metaInfo() { return { title: \'首页\' // 页面标题 } }}

不过到了 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 调用\'); }}