在我项目的开发过程当中,遇到过在钉钉打开的vue写的h5页面,通过在路由切换的时候通过全局的路由钩子函数改变 document.title
的内容失效的问题。
const routes = [
{
path: ‘/‘,
name: ‘home‘,
meta:{
title:"title1"
},
},
{
path:‘/down‘,
name:"down",
meta: {
title: ‘title2‘
},
},
]
const router = new VueRouter({
routes
})
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title;
}
//必须有next 不然路由切换不了
next()
});
解决方法 :
经过了解,我们可以通过引入一个全局的js对象dd来设置钉钉内部的 document.title
// 1.引入js
<script src="http://g.alicdn.com/dingding/dingtalk-jsapi/2.3.0/dingtalk.open.js"></script>
//或者查看钉钉开发手册,里面有一个包
npm install dingtalk-jsapi --save
import * as dd from ‘dingtalk-jsapi‘; // 此方式为整体加载,也可按需进行加载
// 2.改变title
dd.ready(function() {
dd.biz.navigation.setTitle({
title: "123",
})
})
原文:https://www.cnblogs.com/Rembang/p/13215098.html