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

目录

一、需求分析

二、方法调研(插件均不行)

[三、功能实现 (路由守卫+钉钉API)](#三、功能实现 (路由守卫+钉钉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 中设置默认标题和模板:

javascript 复制代码
<script>export default {
  name: 'App',
  metaInfo: {
    title: '工作助手', // 默认标题
    titleTemplate: '%s - 工作助手' // 标题模板
  }
}
</script>

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

javascript 复制代码
<!-- 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",依赖)

javascript 复制代码
// 动态设置标题 - 适配钉钉环境
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 调用');
  }
}
相关推荐
wayuncn7 分钟前
影响服务器托管费用的因素
运维·服务器·数据中心·服务器托管·物理服务器租用·服务器机柜·idc机房托管
喜欢你,还有大家9 分钟前
Linux笔记10——shell编程基础-4
linux·运维·服务器·笔记
玩转以太网14 分钟前
基于 W55MH32Q-EVB 实现 FatFs 文件系统+FTP 服务器
服务器·单片机·物联网
不懂机器人15 分钟前
linux编程----网络通信(TCP)
linux·服务器·tcp/ip
TimelessHaze23 分钟前
拆解字节面试题:async/await 到底是什么?底层实现 + 最佳实践全解析
前端·javascript·trae
兰亭妙微29 分钟前
从线到机:AI 与多模态交互如何重塑 B 端与 App 界面设计
人工智能·小程序·交互·用户体验设计公司
✎﹏赤子·墨筱晗♪42 分钟前
服务器初始化
运维·服务器
会飞的鱼_1231 小时前
CentOS 7服务器初始化全攻略:从基础配置到安全加固
服务器·安全·centos
执键行天涯1 小时前
从双重检查锁定的设计意图、锁的作用、第一次检查提升性能的原理三个角度,详细拆解单例模式的逻辑
java·前端·github
青青子衿越1 小时前
微信小程序web-view嵌套H5,小程序与H5通信
前端·微信小程序·小程序